限制选择两个以上复选框

Question

当使用两个复选框时，我可以一次限制一个复选框的选择。如何使用多个复选框执行此操作？ 继承人我的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对象集合并获取单击并移除其他对象的check属性的复选框。你的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>