企业官网建设流程全解析

做前端的，尤其是这几年从 jQuery 时代过来的，checkbox 绝对算得上是个老朋友。它看似简单——不就是勾一下、取消勾一下嘛，可真上了项目，尤其是后台管理系统的批量处理、列表全选、多条件筛选这些高频场景，你能踩的坑比想象中多得多。我见过不少新同事在 checkbox 上栽跟头，所以想把这些年实操下来最有价值的方法和经验整理出来。这篇文章就围绕 jquery 操作 checkbox 的读、写、遍历、事件绑定和常见的坑，一次性讲透。

文章适合刚接触 jQuery、或者从原生 JavaScript 转过来的开发者，也适合那种平时复制粘贴全选代码但没深究过原理的老手。读完你能明白每个操作背后的逻辑，遇到问题也知道怎么排查。

1. 读选中状态：prop 与 attr 的分岔路

1.1 prop 才是亲儿子

操作 checkbox，最基础的一件事就是判断它到底勾没勾。很多初学者写到这里会直接上attr，结果发现有时候好用有时候不好用，根本原因在于搞混了 HTML 的 attribute 和 DOM 的 property。

jQuery早期版本还没有prop()这个方法，大家都用attr()去操作 checked、disabled 这类布尔属性，所以网上老代码里全是$('#ck').attr('checked')这种写法。但在jQuery 1.6之后，官方明确推荐：判断选中状态用prop()。

// 正确方式 if ($('#subscribe').prop('checked')) { // 已勾选 } // 等价写法，判断结果更直观 if ($('#subscribe').is(':checked')) { // 已勾选 }

读选中状态就认准这两种，稳定可靠，跨版本也基本不会出问题。

1.2 attr 的行为像复印件

为什么attr('checked')会引发诡异问题？我用一个生活化的类比来解释。

attribute写在 HTML 源码里，好比合同上的原始条款，浏览器加载页面时会把合同内容誊写到一份工作清单上，这份清单就是property。用户点击 checkbox，改的是这份工作清单，合同原件纹丝不动。

所以你用$('#box').attr('checked')读到的永远是 "页面刚加载时合同上写了什么"。假设一个 checkbox 在 HTML 里写了 checked，那不管你后来点掉它多少次，attr('checked')依然返回"checked"，而不是空字符串。反过来，如果初始没写 checked，就算用户勾了它，attr('checked')也还是undefined。

<input type="checkbox" id="demo" checked>

console.log($('#demo').attr('checked')); // "checked" $('#demo').prop('checked', false); // 用户/代码取消勾选 console.log($('#demo').attr('checked')); // 依然是 "checked"，因为源 HTML 没变 console.log($('#demo').prop('checked')); // false，因为实际状态已经变了

这个例子特别典型，把它跑一遍你就再也不会用错 attr 和 prop 了。

1.3 is(':checked') 的细节

.is(':checked')是一种更语义化的写法，它内部做的其实就是匹配:checked伪类选择器。用它判断状态的好处是代码读起来像自然语言。

// 推荐，语义清晰 if ($('.cart-item').eq(2).is(':checked')) { // 处理逻辑 }

但也别过度依赖。is(':checked')虽然好用，如果你已经拿到一个 jQuery 对象集合，想要批量知道每个元素的状态，还是老老实实遍历集合中的每一项分别判断。而且注意选择器的性能，在循环里频繁使用伪类选择器性能上不如prop('checked')直接读属性，虽然差距通常小到可以忽略，但既然知道有这回事，批量场景我还是习惯用prop。

还有一点，:checked不仅能匹配 checkbox，还能匹配option元素，所以如果你用.is(':checked')去判断下拉框里的 option，也是有效的。不过判断下拉框选中值有更合适的方法，这个后面遇到再说。

2. 写选中状态：全选、全不选和反选

2.1 单个勾选与取消勾选

设置单个 checkbox 的状态相对简单，一句话的事：

// 勾选 $('#agree').prop('checked', true); // 取消勾选 $('#agree').prop('checked', false);

但这里有几个容易出问题的细节，我分开讲。

其一，不能传字符串。有些人习惯了attr('checked', 'checked')的写法，在prop里也跟着写$('#agree').prop('checked', 'false')。注意，字符串'false'是 truthy 的，它会变成 true，于是你明明想取消勾选，结果反而勾上了。布尔值就规规矩矩传布尔值，别写引号。

其二，触发事件的问题。prop('checked', true)只改变状态，不会触发你绑定在元素上的change事件。这个行为有时候是好事（避免循环触发），有时候是坏事（你需要联动时它悄无声息）。如果你需要模拟用户真实点击的效果，要手动触发一下：

$('#agree').prop('checked', true).trigger('change');

这里顺便提一句，trigger('change')是同步触发你绑定的事件处理器，而triggerHandler不会冒泡也不太一样，一般业务上用trigger就够了。

2.2 全选与全不选的两种思路

全选和全不选的实现思路可以说是一行代码 vs 多行代码的天壤之别：

// 全选 $('.item-checkbox').prop('checked', true); // 全不选 $('.item-checkbox').prop('checked', false);

没错，就是这么粗暴。所有匹配的 checkbox 全部选中，或者全部取消。原理上还是那个 prop，只不过作用范围变成了一个集合。jQuery 的隐式迭代在这里体现得淋漓尽致。

反选的实现也很直接：

$('.item-checkbox').each(function() { $(this).prop('checked', !$(this).prop('checked')); });

或者更简明的写法：

$('.item-checkbox').prop('checked', function(index, oldChecked) { return !oldChecked; });

第二种写法等价于第一种，但是只有一行回调，熟悉 jQuery 函数式风格的会很喜欢。

2.3 半选状态 indeterminate 是个隐藏功能

全选联动里有个需求：子项选了一部分，全选框应该显示"半选"状态。这个状态很多人不知道怎么设置，因为它既不是 checked 也不是 unchecked，而是 DOM 原生的indeterminate属性。

// 半选状态，视觉上是一个横杠 $('#selectAll').prop('indeterminate', true);

这里提个醒：由于indeterminate不是一个 HTML attribute，而是纯的 DOM property，所以绝对不能用attr设置，只能用prop或者直接操作原生的 DOM 对象属性。

// 等价的原生写法 document.getElementById('selectAll').indeterminate = true;

设置半选状态后，checkbox 的外观会变成横杠，但注意，它的 checked 状态依然是 false。所以判定逻辑里要格外小心，不要只看外观，所有判断该用 checked 就用 checked。

3. 遍历选中的 checkbox 并取值

3.1 用 :checked 精准圈定

选中的 checkbox 在手动勾选后就带上了checked属性和:checked状态。用 jQuery 的:checked选择器可以非常精准地圈出这些元素。

// 所有被勾选的 checkbox $('input[type="checkbox"]:checked');

更精细一点，可以限定范围到某个容器或一个表单：

// 限定在 id 为 form1 的表单内 $('#form1 input[type="checkbox"]:checked');

这个写法的可读性很好，一看就知道在干什么。

3.2 取出 value 与自定义属性

真正拿到 checked 的 checkbox 之后，接下来的需求无非是提取里面的数据。每个 checkbox 的value属性是核心数据载体。

var selectedValues = []; $('.item-checkbox:checked').each(function() { selectedValues.push($(this).val()); });

有时候光有 value 不够，还需要带上别的数据（比如主键 ID，上面的文字描述等），这时候可以读取自定义属性，或者直接用 jQuery 封装的data()方法：

var selectedIds = []; $('.item-checkbox:checked').each(function() { selectedIds.push($(this).data('id')); // 读取>$(document).on('change', '.cart-checkbox', function() { var total = 0; $('.cart-checkbox:checked').each(function() { total += parseFloat($(this).data('price')); }); $('#totalPrice').text(total.toFixed(2)); });

这样用户每次勾选或取消勾选，总价都会自动刷新。核心思路就是：能通过选择器圈定的集合状态往往比你记住每一个元素的当前状态更可靠。这条思路在做复杂联动时能帮你简化非常多的代码。

4. 事件监听：change 与事件委托

4.1 绑定 change 事件的常规姿势

checkbox 的核心事件是change，它在用户勾选/取消勾选时触发。直接绑定最常规：

$('#item-1').on('change', function() { console.log('状态变成：' + $(this).prop('checked')); });

注意，checkbox 的click事件其实也在触发，但 click 事件触发的那一瞬间 checked 状态可能还没稳定，用 click 处理业务容易出现状态滞后。用 change 最稳，因为这个事件的语义就是"状态变了之后"。

4.2 动态创建元素的绑定失效问题

这是个高频踩坑点。页面初始化时用$('.ck').on('change', handler)给静态 checkbox 绑定了一切正常，但后来通过 AJAX 拉到数据、用 JS 动态创建了一堆新的 checkbox，你再去勾它，发现 handler 完全不执行。

原因在于事件绑定是在创建元素之前执行的，新元素根本没有绑定上任何事件。

// 动态添加的 checkbox 无法触发上面的事件 $.ajax({ url: '/api/list', success: function(data) { var html = ''; data.forEach(function(item) { html += '<li><input type="checkbox" class="ck" value="' + item.id + '">' + item.name + '</li>'; }); $('#list').html(html); // 这里的 .ck 没有 change 事件 } });

4.3 用 on() 实现事件委托

解决方案是事件委托。把事件绑定到一个始终存在的父容器上，利用事件冒泡机制去捕获来自内部元素的 change 事件。

// 委托绑定：无论 .ck 什么时候出现，都能触发 $('#list').on('change', '.ck', function() { // 处理逻辑 });

第二个参数.ck是一个选择器，jQuery 的事件绑定系统会把事件源匹配这个选择器，命中才执行 handler。这就是最保险的写法。

说白了，事件委托就是"我把耳朵贴在墙上听屋子里所有人的动静，不管什么时候进来的人，只要做动作我都能听到"，比挨个贴耳朵要可靠得多。

4.4 防止重复绑定的标准做法

另一个常见问题是页面逻辑一多，某个函数执行了多次，事件就被绑了一次又一次。表现是勾一个 checkbox，控制台打印好几次、请求发好几次。

推荐的防御性写法是在绑定前先解绑：

$('#list').off('change', '.ck').on('change', '.ck', function() { // 处理逻辑 });

off再on，确保同一处理器只保留一份。哪怕这段代码被调用十次，最终绑定的也只有一份。这个习惯能帮你省掉不少排查重复请求的时间。

5. 综合实战：全选联动与批量操作

5.1 从需求出发设计交互

把前面的知识串起来，实现一个最常见的后台表格批量操作界面。需求很简单：一个列表，每行一个 checkbox，表头上一个全选框，外加一个"批量删除"按钮。

• 勾选全选框，所有行选中，全选框变勾选状态。
• 取消全选框，所有行取消选中。
• 手动勾选部分行，全选框进入半选状态（indeterminate）。
• 手动勾选全部行，全选框自动变为全选状态。
• 批量删除按钮只处理选中的行。

5.2 HTML 结构

<table id="dataTable"> <thead> <tr> <th><input type="checkbox" id="selectAll"></th> <th>名称</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="row-check">$(function() { var $selectAll = $('#selectAll'); var $rowChecks = $('.row-check'); // 全选框变化：影响所有子项 $selectAll.on('change', function() { var isChecked = $(this).prop('checked'); $rowChecks.prop('checked', isChecked); $rowChecks.trigger('change'); // 触发行选中状态变化逻辑，便于扩展 }); // 子项变化：反过来影响全选框状态 $('tbody').on('change', '.row-check', function() { var totalCount = $rowChecks.length; var checkedCount = $rowChecks.filter(':checked').length; if (checkedCount === 0) { $selectAll.prop('checked', false); $selectAll.prop('indeterminate', false); } else if (checkedCount === totalCount) { $selectAll.prop('checked', true); $selectAll.prop('indeterminate', false); } else { $selectAll.prop('checked', false); $selectAll.prop('indeterminate', true); // 半选状态 } }); // 批量删除：获取选中项 id 并处理 $('#batchDelete').on('click', function() { var ids = []; $rowChecks.filter(':checked').each(function() { ids.push($(this).data('id')); }); if (ids.length === 0) { alert('请至少选择一条记录'); return; } if (confirm('确定删除选中的 ' + ids.length + ' 条记录吗？')) { // 异步请求删除，删除成功后刷新列表 console.log('待删除的 id 列表：', ids.join(',')); } }); });

这里有一个细节值得单独提示：判断半选状态必须严格区分checkedCount === 0、checkedCount === totalCount、0 < checkedCount < totalCount三种情况，顺序不能乱。如果先判断半选，你会在全选时同时设置半选和全选，视觉上出现横杠加勾的怪异状态。

5.4 全选联动常见翻车点

这个联动的代码看着不复杂，但实际项目里翻车率不低。最常见的是这几个问题：

第一，子项数量变化。如果是动态加载的列表，用 AJAX 刷新表格后，$rowChecks这个变量还指向旧的一批元素，新行的 checkbox 不在这个集合里。所以动态场景下，子项集合应该是每次实时查询，而不是在初始化时缓存：

// 每次读取最新 DOM 状态，不要缓存 var $rowChecks = function() { return $('#dataTable tbody .row-check'); };

然后在各个事件处理器里调用$rowChecks()获取最新集合。这个是一个很隐蔽但特别实际的坑，我在真实项目里踩过。

第二，表格数据为空时。如果一行都没有，totalCount是 0，checkedCount也是 0，代码会走进checkedCount === 0分支，全选框被取消勾选，这没问题。但如果你把判断顺序换成checkedCount === totalCount在前，就会出现 0 === 0 成立，空表格全选框反而被勾上的诡异现象。所以判断条件写的时候，一定要考虑边界情况。

6. 常见问题排查实录

6.1 jQuery 版本差异引发的历史问题

网上大量老教程还在用attr('checked', true)设置选中，如果你用的 jQuery 版本是 1.6 之前的（现在不太可能了，但老项目未必没有），这样做确实有效。1.6 版本之后，用attr('checked', true)在多数浏览器里也能生效，但行为不一致，尤其是在动态创建元素和跨浏览器场景下。

最佳实践很简单：凡是操作 DOM 元素的 property（比如 checked、disabled、selected、value 等），一律用prop()；凡是操作 HTML attribute（比如 id、class、data-* 等），才用attr()。记住这个标准，基本不会再出这种错。

6.2 勾选了但前端界面没反应

排查这个问题的思路一般从两个方向入手：

先确认你操作的是不是同一个 jQuery 对象。很多时候选择器写宽了（比如$('input[type="checkbox"]')和$('.item-check')），你以为操作了目标元素，实际操作的是另一批元素。用浏览器开发者工具选中元素，然后在控制台里手动执行一遍代码，看是否有变化，这招屡试不爽。

再确认是不是有代码又改回去了。比如全选框的 change 事件绑定了prop('checked', false)，而子项的 change 事件里又触发了全选框的 change，形成了循环或覆盖。排查方式是临时注释掉相关 handler，逐个确认。

6.3 用 val() 读取 checkbox 的坑

checkbox 的val()方法永远返回元素 value 属性的值，无论它是否被选中。这是很多新人会踩的坑：

<input type="checkbox" id="newsletter" value="yes" checked>

$('#newsletter').val(); // 永远返回 "yes"

如果你想用 val() 判断选中状态，那是做不到的。val() 只负责取值，不负责状态。正确做法是先判断prop('checked')，再去拿 value：

if ($('#newsletter').is(':checked')) { var val = $('#newsletter').val(); }

这个区分很基本，但每个面试季都有不少人因此挂掉。

6.4 禁用 checkbox 带来的提交问题

处于disabled状态的 checkbox 不会出现在表单提交数据里。但很多时候我们希望它展示但不能交互，这时可以用 readonly 吗？注意，HTML 里 readonly 对 checkbox 无效，checkbox 依然可以点击切换。

常用方案是先禁用它，再往表单里塞一个隐藏域，用隐藏域的 value 承载真正的提交数据：

<input type="checkbox" id="lockedItem" checked disabled> <input type="hidden" name="lockedItem" value="1">

这样视觉上是一个勾选的、不可操作的 checkbox，数据也能正常提交。类似的场景还有"已读公告""管理员的默认权限"之类的，都能这么处理。

6.5 serialize 序列化时复选框缺失

表单.serialize()序列化 checkbox 有一个前提：必须用 name 属性分组，且只有被选中的 checkbox 会出现在序列化结果中。这是 HTML 表单规范决定的——未选中的 checkbox 不算成功控件。

假设你在页面上展示了一堆商品属性，用户一个都没勾选，前端收集的序列化字符串里就没有这个字段，后端可能因此认为没收到参数。解决方案和上面类似，提供一个隐藏的同名字段作为兜底：

<input type="hidden" name="tags" value=""> <input type="checkbox" name="tags" value="前端"> <input type="checkbox" name="tags" value="后端">

这样不管用户有没有勾选，序列化时 tags 总会出现（勾选时用勾选的值覆盖，不勾选时用空字符串，后端收到的值不一样但字段不会缺失）。这个技巧在处理筛选条件时特别实用。

6.6 常见问题速查表

我在实际项目里还碰到过一个比较隐晦的场景：全选框的 change 事件里做了trigger('change')，间接导致了子项 change 的联动又反过来设置全选框状态，形成了一个事件循环。排查这种问题最好的技巧是在每个 handler 入口加一个 console.trace 或者断点，查看调用栈。如果是嵌套触发的，调用栈会清晰地告诉你这个事件是被谁触发的。

最后再分享一个小经验：操作 checkbox 的代码尽量集中在同一个模块里，用统一的函数命名风格，比如setAllChecked(flag)、getCheckedValues()，别随手散落在一堆回调里。checkbox 的状态联动逻辑本来就不复杂，最容易出问题的其实是无序的修改入口。只要你把读、写、事件这三件事理清楚了，全选、半选、批量操作这些功能写起来就跟喝水一样自然。