Javascript 使用多组单选按钮，如何取消隐藏和隐藏图像

图像//使用按钮隐藏和显示图像

图像根据选中的单选按钮/复选框显示

<img id="storage_drawer" src="images/placeholder/get_hardware/storage_drawer.png" />
<img id="cash_drawer" src="images/placeholder/get_hardware/cash_drawer.png" />   

---

脚本结束

如果您的单选框具有相同的名称属性，则它们将表现为单选按钮，即组中只能有一个选项处于活动状态，但如果每个按钮都有自己的名称，则可以选择所有选项

因此，如果你有这样一组收音机：

<form>
   <input type="radio" name="1">
   <input type="radio" name="2">
   <input type="radio" name="3">
 </form>

编辑：

我做了一个js fiddler和一个工作示例，也许它会给出一些答案

---

你能把html放进去吗？这不是我遇到问题的选中部分，而是让图像显示在onclick上。。。第一组显示，但第二组不显示，但有什么问题。。第二组的单击处理程序是否启动？图像选择器是否返回预期的dom对象？这就是我的想法，我以前尝试过这个解决方案，但由于一些奇怪的原因，我无法让它工作。“show（）或“hide（）函数是否按特定顺序”重要吗？如果您使用复选框行为，它将不再隐藏图像。。。。这是我目前的主要问题。当向单选按钮添加“复选框功能”时，它也会删除隐藏和显示功能。您必须使用如下内容：函数toggleVisibility（id）{var el=document.getElementById（id）；if（el.style.visibility==“visible”）{el.style.visibility=“hidden”}else{el.style.visibility=“visible”；}要使复选框行为在我的示例中起作用，您需要为每个收音机指定一个uniqe名称。如果这不是你想要的，恐怕我不明白你想要的是什么。

    $(document).ready(function(){

        to make make checkboxes have the functionality of radio buttons
        var $inputs = $(".unique");

            $inputs.change(function(){
                $inputs.not(this).prop('checked');
            });
            return false;

        radio buttons -- first set of radio buttons
        $("input[name$=type]").click(function(){

            var value = $(this).val();
            //Cash Drawers
            if(value == 'cashDrawer') {
                $("#cash_drawer").show();
                $("#storage_drawer").hide();
            }
            else if( value == 'storageDrawer') {
                $("#storage_drawer").show();
                $("#cash_drawer").hide();
            }
        })
        $("#cash_drawer").hide();
        $("#storage_drawer").hide();


      second set of radio buttons

        $("input[name$=type2]").click(function(){

            var value = $(this).val();
            //Barcode Scanners
            if(value = 'singleLine') {
                $("#sinlgeBarcode").show();
                $("#multiBarcode").hide();
            }
            else if(value == 'multiLine') {
                $("#multiBarcode").show();
                $("#sinlgeBarcode").hide();
            }
        })
        $("#sinlgeBarcode").hide();
        $("#multiBarcode").hide();  
    });


    });

<form>
   <input type="radio" name="1">
   <input type="radio" name="2">
   <input type="radio" name="3">
 </form>

// This will allow the radio boxes to toggle on of.
$("input[type=radio]").click(function(){ 
    $(this).attr("checked",  !$(this).attr("checked"));
});