如何仅检查组Chechbox中另一个复选框中的所有其他复选框

Question

我只需要启用其中一个复选框中选中（不取消选中）组中其他所有复选框的复选框

<input type="checkbox" name="product" value="all" />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

我需要做的是women, men and bi当用户单击全部时women, men and bi选中所有women, men and bi复选框，但仅当用户单击其他选项之一时，才通过代码取消选中该复选框？

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="product" value="all" />All Genders <br /> <input type="checkbox" name="product" value="women" />Women <br /> <input type="checkbox" name="product" value="men" />Men<br /> <input type="checkbox" name="product" value="bi" />Bi<br /> 

Answer 1

 $(document).on("click", "input", function (evt) { if($(this).hasClass('selall')) { $('input').prop('checked', true); } else { $('.selall').prop('checked', false); } if ($('.gender:checked').length == $('.gender').length) { $('input').prop('checked', true); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="product" value="all" class="selall" />All Genders <br /> <input type="checkbox" name="product" value="women" class="gender" />Women <br /> <input type="checkbox" name="product" value="men" class="gender" />Men<br /> <input type="checkbox" name="product" value="bi" class="gender" />Bi<br /> 

Answer 2

添加事件侦听器的第一个checkBox ，当它改变时，如果它的checked ，然后check所有的checkboxes ：

 const inputs = document.querySelectorAll('input[type="checkbox"]'); document.querySelector('input[type="checkbox"]').addEventListener('change', function(e) { if (this.checked) inputs.forEach(function(elem) { elem.checked = true; }); }); inputs.forEach(function(elem) { elem.addEventListener('change', function(e) { if (!this.checked) document.querySelector('input[type="checkbox"]').checked = false; }); }); 

 <input type="checkbox" name="product" value="all" />All Genders <br /> <input type="checkbox" name="product" value="women" />Women <br /> <input type="checkbox" name="product" value="men" />Men<br /> <input type="checkbox" name="product" value="bi" />Bi<br />