全选复选框首次操作有效，后续点击失效的技术问题求助

这个问题我之前也踩过坑！核心原因是你混用了jQuery的attr()和prop()方法来操作复选框的选中状态，这俩方法的适用场景完全不同。

问题根源分析 #

当你第一次点击全选按钮时，attr('checked', 'checked')给子复选框添加了HTML层面的checked属性，能正常选中；但取消全选时用removeAttr('checked')直接把这个HTML属性删掉了。后续再点击全选时，attr()试图重新添加HTML属性，可此时浏览器是通过DOM对象的checked属性（而非HTML属性）来维护复选框状态的，HTML属性只在页面初始化时生效，所以就出现了功能失效的情况。

修正后的代码方案 #

只需要把操作选中状态的方法统一换成prop()就可以解决问题：

JavaScript 代码

function chk() {
  // 获取全选框的选中状态
  var isChecked = $('#chkAll').prop('checked');
  // 统一设置所有子复选框的状态
  $('.hobbie').prop('checked', isChecked);
}

HTML 代码（无需修改）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk()" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">

进阶优化方案（推荐） #

把事件绑定从HTML属性里抽离出来，让代码结构更清晰，也符合前后端分离的最佳实践：

优化后的 JavaScript

// 页面加载完成后绑定事件
$(function() {
  $('#chkAll').on('change', function() {
    // 直接用当前全选框的状态设置子复选框
    $('.hobbie').prop('checked', $(this).prop('checked'));
  });
});

对应的 HTML（移除onclick属性）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">

这样修改后，不管你点击多少次全选/取消全选，功能都会一直正常工作啦～

内容的提问来源于stack exchange，提问作者vivek modi