2つ以上のチェックボックスの選択を制限する

Question

2つのチェックボックスを使用すると、一度に1つのチェックボックスの選択を制限できます。複数のチェックボックスを使用してどのようにしますか？ はHERESに私のjavascript：

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $('#checkbox1').click(function() { 
     var checkedBox = $(this).attr("checked"); 
      if (checkedBox === true) { 
       $("#checkbox2").attr('checked', false); 
      } else { 
       $("#checkbox2").removeAttr('checked');      
      } 
     }); 
    }); 

    $(document).ready(function(){ 
     $('#checkbox2').click(function() { 
     var checkedBox = $(this).attr("checked"); 
      if (checkedBox === true) { 
       $("#checkbox1").attr('checked', false);      
      } else { 
       $("#checkbox1").removeAttr('checked');      
      } 
     }); 
    }); 


$(document).ready(function(){ 
     $('#checkbox3').click(function() { 
     var checkedBox = $(this).attr("checked"); 
      if (checkedBox === true) { 
       $("#checkbox3").attr('checked', false); 
      } else { 
       $("#checkbox3").removeAttr('checked');      
      } 
     }); 
    }); 

</script> 

そして、私のHTMLコードをとして怒鳴る

<i><input id="checkbox1" type="checkbox" name="checkbox1" value="gold" /> 
     <label class="licencecheck" for="checkbox1"></label></i> 
<i><input id="checkbox2" type="checkbox" name="checkbox2" value="gold" /> 
     <label class="licencecheck" for="checkbox2"></label></i> 
<i><input id="checkbox3" type="checkbox" name="checkbox3" value="gold" /> 
     <label class="licencecheck" for="checkbox3"></label></i> 

Answer 1

この場合の使用のラジオボタンがあり、これは、あなただけの1つの要素を選択することができますを確認しますとして無制限のラジオボタンのために働きます同じname：

<i> 
 
    <input id="radio1" type="radio" name="group" value="gold" /> 
 
    <label class="licencecheck" for="radio1"></label> 
 
</i> 
 
<i> 
 
    <input id="radio2" type="radio" name="group" value="copper" /> 
 
    <label class="licencecheck" for="radio2"></label> 
 
</i> 
 
<i> 
 
    <input id="radio3" type="radio" name="group" value="silver" /> 
 
    <label class="licencecheck" for="radio3"></label> 
 
</i>

Answer 2

チェックボックスに共通クラスを追加してjQueryオブジェクトコレクションとして選択し、他のチェック属性をクリックして削除するクラスを取得できます。これにあなたのHTMLとJavaScriptを変更します。

$(document).ready(function() { 
 
    $('.my_checkbox').click(function() { 
 
     $(".my_checkbox").not(this).attr('checked', false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<i><input id="checkbox1" type="checkbox" class="my_checkbox" name="checkbox1" value="gold" /> 
 
     <label class="licencecheck" for="checkbox1"></label></i> 
 
<i><input id="checkbox2" type="checkbox" class="my_checkbox" name="checkbox2" value="gold" /> 
 
     <label class="licencecheck" for="checkbox2"></label></i> 
 
<i><input id="checkbox3" type="checkbox" class="my_checkbox" name="checkbox3" value="gold" /> 
 
     <label class="licencecheck" for="checkbox3"></label></i>