Question

如何切换复选框？使用javascript，我可以切换复选框。但是jQuery全部切换一次。

$("#check-all").click(function() {
  if ($("#check-all").checked) {
    for (var i = 0; i < $('.check').length; i++) {
      $(".check")[i].checked = false;
    }
  } else {
    for (var i = 0; i < $('.check').length; i++) {
      $(".check")[i].checked = true;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check-all">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
<input type="checkbox" class="check">

Answer 1

$("#check-all").checked始终为undefined（在if else表达式中其值为false），因为jQuery包装器$("#check-all")没有名为{{ 1}}。要获取元素的checked属性的值，您需要使用.prop()方法。获取当前选中状态，然后再次使用checked在所有其他复选框上进行设置：

.prop()

$("#check-all").click(function(e) {
  var checked = $(e.target).prop('checked');
  
  $(".check").prop('checked', checked);
});

Answer 2

使用.prop('checked', Boolean)
使用"change" eventName代替
别忘了当所有的{strong>组都通过使用!$ckb.not(':checked').length被选中/未选中时，还需要处理“所有”复选框

这是一个涵盖所有功能的更好的示例：

const $all = $('#check-all');
const $ckb = $('.check');

$ckb.add($all).on('change', function() {
  if (this === $all[0]) {
    $ckb.prop('checked', this.checked);
  } else {
    $all.prop('checked', !$ckb.not(':checked').length);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" id="check-all"> All </label>
<label><input type="checkbox" class="check"> 1</label>
<label><input type="checkbox" class="check"> 2</label>
<label><input type="checkbox" class="check"> 3</label>

如何切换选中所有复选框

2 个答案: