Question

我只需启用检查（不取消选中）其中一个组中的所有其他chechebox复选框，如

<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复选框，但是当用户点击其他选项时，只能通过代码取消选中它？

＆＃13;

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

＆＃13;

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

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

2 个答案: