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

using multiple sets of radio buttons, how can I unhide and hide images

本文关键字：隐藏 取消 图像 何取消 单选按钮      更新时间：2023-09-26

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

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

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

形成两组单选按钮//通过javascript函数更改为复选框

<input type="checkbox" id="cashdrawer" name="type" value="cashDrawer" class="unique" >
<input type="checkbox" id="cashStorage" name="type" value="storageDrawer" class="unique">
               //second set of radio buttons
<input type="checkbox" id="single" name="type2" value="singleLine" class="unique" >
<input type="checkbox" id="multi" name="type2" value="multiLine" class="unique" >
</form>

脚本的开始

    $(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>

你可以用一个小javascript让它们表现得像复选框：

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

编辑：

我用一个工作例子做了一个js小提琴手，也许它会给出一些答案。

http://jsfiddle.net/uPp82/1/

相关文章：