限制選擇兩個以上覆選框

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>