0

画像 //ボタンで画像を隠したり表示したりします

選択したラジオボタン/チェックボックスに基づいて画像が表示されます

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

2組のラジオボタンを形成// 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();  
    });


    });

スクリプトの終わり

4

1 に答える 1

0

ラジオ ボックスに同じ name 属性がある場合、それらはラジオ ボタンとして動作します。つまり、グループ内でアクティブにできる選択は 1 つだけですが、各ボタンに独自の名前がある場合は、すべて選択できます。

したがって、次のようなラジオのコレクションがある場合:

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

于 2013-07-11T20:29:20.863 に答える