Question

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

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

<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();  
    });


    });

脚本结束

Answer 1

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

所以如果你有这样的收音机集合：

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

你可以让他们表现得像一个带有lil 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/

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

1 个答案: