0

Images //hide and show images with buttons

images are shown based on radio button/checkbox selected

<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 two sets of radio buttons// changed into checkboxes by javascript function 

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

Start of script 

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


    });

end of script

4

1 回答 1

0

如果您的单选框具有相同的名称属性，它们将表现为单选按钮，即在组中只能激活一个选择，但如果每个按钮都有自己的名称，则它们都可以被选中。

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

<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 fiddler，也许它会给出一些答案。

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

于 2013-07-11T20:29:20.863 回答