复选框在网页表单里随处可见，但浏览器本身并不会记录用户勾选的先后顺序。当业务需要知道顺序时，比如一个权限配置页面要求"先勾选的权限优先级更高"，或者问卷系统需要统计选项的排列偏好，就必须自己动手维护这个顺序信息。本文分别用jQuery和原生JavaScript实现这一需求，并分析两种方案的差异。
为什么复选框顺序需要单独维护
HTML中的checkbox只有两种状态：checked和unchecked。用户点击时，浏览器只会切换这个布尔值，不会留下任何关于"什么时候点的"的痕迹。如果直接遍历DOM获取所有勾选的复选框，得到的顺序是文档流顺序，而不是用户的操作顺序。
举个例子，页面上依次排列三个选项：读书、听歌、跑步。用户先勾了"跑步"，再勾"读书"，最后勾"听歌"。如果按DOM顺序取值，结果是"读书、听歌、跑步"，和真实操作顺序完全不符。要还原真实顺序，就必须在每次change事件发生时把当前复选框的标识记录下来，形成一个有序列表。
这里有一个关键设计点：记录的数据结构建议用数组，因为数组天然有序，push和按值查找删除都很方便。同时要考虑取消勾选的情况，用户反悔取消某一项时，这一项必须从顺序列表中移除，否则数据就脏了。
基于jQuery的实现方案
jQuery的优势在于事件委托写法简洁，适合复选框数量多或者动态生成的场景。下面的例子把change事件绑定在容器上，通过冒泡机制捕获所有子复选框的变化，每次勾选时把选项值推入数组，取消时从数组中移除。
$(function () {
var order = []; // 记录勾选顺序的数组
$('#checkboxWrap').on('change', ':checkbox', function () {
var val = $(this).val();
if (this.checked) {
order.push(val); // 勾选时追加到末尾
} else {
var idx = $.inArray(val, order);
if (idx > -1) {
order.splice(idx, 1); // 取消勾选时移除
}
}
$('#orderResult').text(order.join(' -> '));
});
});对应的HTML结构如下，几个复选框放在同一个容器里，底部用一个段落实时展示当前顺序：
<div id="checkboxWrap"> <label><input type="checkbox" value="读书"> 读书</label> <label><input type="checkbox" value="听歌"> 听歌</label> <label><input type="checkbox" value="跑步"> 跑步</label> </div> <p>当前勾选顺序：<span id="orderResult"></span></p>
这段代码里用了$.inArray查找索引，等价于原生数组的indexOf方法。有一点需要留意：如果多个复选框的value可能重复，就不能只存value，应该存一个唯一标识，比如给每个复选框加上data-id属性，改用$(this).data('id')作为记录键，避免移除时误删。
基于原生JavaScript的实现方案
不依赖任何库，用原生JavaScript同样能优雅地完成。这里推荐用事件委托配合Map结构，Map保持插入顺序的特性正好契合需求，而且查找删除的效率比数组按值查找更高。
document.addEventListener('DOMContentLoaded', function () {
var wrap = document.getElementById('checkboxWrap');
var orderMap = new Map(); // key为复选框value，value为序号
var counter = 0;
wrap.addEventListener('change', function (e) {
var box = e.target;
if (box.type !== 'checkbox') return;
if (box.checked) {
counter++;
orderMap.set(box.value, counter);
} else {
orderMap.delete(box.value);
}
var keys = Array.from(orderMap.keys());
document.getElementById('orderResult').textContent =
keys.length ? keys.join(' -> ') : '';
});
});Map的一个好处是key唯一，重复勾选同一项不会产生脏数据，天然规避了value重复的问题。遍历orderMap.keys()时得到的顺序就是插入顺序，也就是用户的勾选顺序，语义非常直观。
如果需要兼容不支持Map的老浏览器，把Map换成普通对象加独立数组也可以，思路是一样的：勾选时记录，取消时删除，展示时按记录顺序输出。
页面刷新后的顺序还原
用户勾选到一半刷新页面，浏览器会把checked状态还原（前提是表单有autocomplete或者使用了 sessionStorage 类机制），但顺序数组在内存里，刷新即丢。解决办法是把顺序持久化到localStorage，每次change时同步写入：
localStorage.setItem('checkOrder', JSON.stringify(order));
// 页面加载时还原
var saved = localStorage.getItem('checkOrder');
if (saved) {
order = JSON.parse(saved);
}还原时要注意一个细节：localStorage里保存的顺序可能包含当前页面已经不存在的选项，还原后应该做一次过滤，只保留DOM中仍然存在的复选框值，否则展示出来的顺序会带上无效项。
两种方案的对比与选择建议
从代码量看，两种方案差不多；从依赖看，原生方案零依赖，适合现代项目或对体积敏感的场景；从兼容性看，jQuery方案可以覆盖更老的浏览器，老项目维护时更省心。事件委托方面两者都能实现，写法上jQuery的选择器过滤更简洁，原生方案需要自己判断e.target的类型。
性能层面，选项数量在几十个以内时差别可以忽略。如果复选框是几千个的大列表，建议采用原生方案加Map结构，避免每次取消勾选时的按值线性查找，同时可以配合文档碎片或虚拟列表优化渲染。
总体来说，新项目直接用原生JavaScript加Map是更现代的选择；如果是维护已有的jQuery老代码，用第一种方案改造成本最低。无论哪种方案，核心逻辑都是一句话：勾选时记录，取消时移除，读取时按记录顺序输出。
复选框jQueryJavaScript修改时间：2026-09-05 22:48:44