Question

我正在选择所有复选框，这是我的新手，我找到了一些解决方案，但不起作用。我要选中“垂直div”的所有复选框我有2个div，每个div都有单独的选择所有复选框。我的问题是，当我选择一个全选复选框时，全部两个div都被选中，而不是该div的这个复选框仅应被选中。这是我的代码：

$('#selectall').change(function() {
  if ($(this).prop('checked')) {
    $('input').prop('checked', true);
  } else {
    $('input').prop('checked', false);
  }
});
$('#selectall').trigger('change');

$('#selectall2').change(function() {
  if ($(this).prop('checked')) {
    $('input').prop('checked', true);
  } else {
    $('input').prop('checked', false);
  }
});
$('#selectall2').trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Select All
  <input id='selectall' type="checkbox"><br>1.

  <input type="checkbox">2.
  <input type="checkbox">3.
  <input type="checkbox">4.
  <input type="checkbox">5.
  <input type="checkbox">
</div>

<div>Select All
  <input id='selectall2' type="checkbox"><br>1.

  <input type="checkbox">2.
  <input type="checkbox">3.
  <input type="checkbox">4.
  <input type="checkbox">5.
  <input type="checkbox">
</div>

Answer 1

您的'input'选择器正在文档中选择每个 input。使用input方法，仅选择与点击元素同级的siblings()：

$('#selectall').change(function() {
  if ($(this).prop('checked')) {
    $(this).siblings().prop('checked', true);
  } else {
    $(this).siblings().prop('checked', false);
  }
});
$('#selectall').trigger('change');

$('#selectall2').change(function() {
  if ($(this).prop('checked')) {
    $(this).siblings().prop('checked', true);
  } else {
    $(this).siblings().prop('checked', false);
  }
});
$('#selectall2').trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Select All
  <input id='selectall' type="checkbox"><br>1.

  <input type="checkbox">2.
  <input type="checkbox">3.
  <input type="checkbox">4.
  <input type="checkbox">5.
  <input type="checkbox">
</div>

<div>Select All
  <input id='selectall2' type="checkbox"><br>1.

  <input type="checkbox">2.
  <input type="checkbox">3.
  <input type="checkbox">4.
  <input type="checkbox">5.
  <input type="checkbox">
</div>

但是提供全选复选框类而不是ID会更优雅，然后您可以同时选择它们：

$('.selectall').change(function() {
  if ($(this).prop('checked')) {
    $(this).siblings().prop('checked', true);
  } else {
    $(this).siblings().prop('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Select All
  <input class='selectall' type="checkbox"><br>1.

  <input type="checkbox">2.
  <input type="checkbox">3.
  <input type="checkbox">4.
  <input type="checkbox">5.
  <input type="checkbox">
</div>

<div>Select All
  <input class='selectall' type="checkbox"><br>1.

  <input type="checkbox">2.
  <input type="checkbox">3.
  <input type="checkbox">4.
  <input type="checkbox">5.
  <input type="checkbox">
</div>

Answer 2

最简单。无需更改HTML即可处理重新加载

$('[id^=selectall]').change(function() {  // id begins with selectall
  var chk = $(this).prop('checked');      // is it checked?
  $(this).siblings().prop('checked',chk); // set all its siblings
}).change(); // trigger now in case of reload

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Select All
  <input id='selectall' type="checkbox"><br>1.

  <input type="checkbox">2.
  <input type="checkbox">3.
  <input type="checkbox">4.
  <input type="checkbox">5.
  <input type="checkbox">
</div>

<div>Select All
  <input id='selectall2' type="checkbox" checked><br>1.

  <input type="checkbox">2.
  <input type="checkbox">3.
  <input type="checkbox">4.
  <input type="checkbox">5.
  <input type="checkbox">
</div>

单击特定div时选中选择复选框

2 个答案: