本文将探讨如何通过事件监听机制，在用户选择或取消选择复选框时，动态维护一个数组，以确保复选框的值按照其被选中的先后顺序进行存储。我们将分别介绍基于jquery和原生javascript的实现方法，并提供详细的代码示例和解释，帮助开发者准确获取用户交互的顺序数据。
在Web开发中，我们经常需要获取用户通过复选框（checkbox）选择的数据。然而，如果仅仅使用$('input[name="mycheck"]:checked').each()这样的方法，通常只能按照DOM中元素的自然顺序获取已选中的值，而无法得知用户实际选择的先后顺序。例如，如果用户先选中“选项2”，再选中“选项3”，最后选中“选项1”，我们期望得到的结果是['2', '3', '1']，而非['1', '2', '3']。为了解决这一问题，我们需要采用事件驱动的方式，实时追踪用户的选择行为。
使用jQuery实现按选择顺序获取复选框值
通过jQuery，我们可以利用其强大的事件处理机制来监听复选框的状态变化。当复选框被选中时，将其值添加到我们的顺序数组中；当复选框被取消选中时，则从数组中移除对应的值。
HTML结构
首先，定义一组复选框，每个复选框都应有一个value属性，用于标识其值。
JavaScript逻辑
核心逻辑是监听所有复选框的change事件。当事件触发时，判断当前复选框的状态。
立即学习“Java免费学习笔记（深入）”；
var list = []; // 用于存储按选择顺序排列的复选框值
$('input[name="mycheck"]').on("change", function(e) {
let boxval = $(this).val(); // 获取当前复选框的值
if ($(this).is(':checked')) {
// 如果复选框被选中，将其值添加到数组末尾
list.push(boxval);
} else {
// 如果复选框被取消选中，从数组中移除对应的值
// 使用$.grep()方法过滤掉被取消选中的值
list = $.grep(list, function(item) {
return boxval !== item;
});
}
console.log(list); // 每次状态变化后，在控制台输出当前顺序
});代码解析：
- var list = [];：初始化一个空数组，用于存储复选框的选中顺序。
- $('input[name="mycheck"]').on("change", function(e) { ... });：为所有name属性为mycheck的input元素绑定change事件监听器。当这些复选框的状态发生变化（选中或取消选中）时，回调函数会被执行。
- let boxval = $(this).val();：在事件回调中，$(this)指向触发事件的当前复选框。val()方法用于获取其value属性值。
- if ($(this).is(':checked')) { ... }：使用is(':checked')判断当前复选框是否处于选中状态。
- list.push(boxval);：如果复选框被选中，则将boxval添加到list数组的末尾，从而记录其选择顺序。
- list = $.grep(list, function(item) { return boxval !== item; });：如果复选框被取消选中，$.grep()方法会遍历list数组。回调函数返回true的元素会被保留，返回false的元素（即与boxval相同的值）会被移除，从而更新list数组，保持其顺序性。
使用原生JavaScript实现按选择顺序获取复选框值
对于不依赖jQuery的项目，我们也可以纯粹使用原生JavaScript来实现相同的功能。
HTML结构
与jQuery示例相同，复选框的HTML结构保持不变。
JavaScript逻辑
原生JavaScript的实现思路与jQuery类似，但使用不同的DOM选择器和数组操作方法。
var list = []; // 用于存储按选择顺序排列的复选框值
// 获取所有name属性为"mycheck"的input元素
document.querySelectorAll('input[name="mycheck"]').forEach(function (box) {
box.addEventListener("change", function (evt) {
let boxval = evt.target.value; // 获取触发事件的复选框的值
if (true === box.checked) {
// 如果复选框被选中，将其值添加到数组末尾
list.push(boxval);
} else {
// 如果复选框被取消选中，从数组中移除对应的值
// 使用Array.prototype.filter()方法过滤
list = list.filter(function(val) {
return boxval !== val;
});
}
console.log(list); // 每次状态变化后，在控制台输出当前顺序
});
});代码解析：
- document.querySelectorAll('input[name="mycheck"]')：使用querySelectorAll获取所有匹配选择器的元素，返回一个NodeList。
- .forEach(function (box) { ... });：遍历NodeList中的每个复选框元素。
- box.addEventListener("change", function (evt) { ... });：为每个复选框添加change事件监听器。
- let boxval = evt.target.value;：在事件回调中，evt.target指向触发事件的元素，value属性获取其值。
- if (true === box.checked) { ... }：box.checked是一个布尔属性，表示复选框是否被选中。
- list.push(boxval);：选中时将值推入数组。
- list = list.filter(function(val) { return boxval !== val; });：取消选中时，使用Array.prototype.filter()方法创建一个新数组，其中不包含被取消选中的值。
注意事项与总结
- 初始状态处理： 上述两种方法都只在复选框状态发生变化时更新list数组。如果页面加载时某些复选框已是选中状态，并且您希望它们也按其DOM顺序（或预设顺序）包含在list中，您需要在页面加载完成后额外执行一次遍历，将初始选中的值添加到list中。
- 性能考虑： 对于数量庞大的复选框，每次filter或grep操作都会遍历数组。虽然对于大多数Web应用场景，这通常不是性能瓶颈，但在极端情况下，可能需要考虑更优化的数据结构或算法。
- 唯一性： 示例假设复选框的值是唯一的。如果存在相同值的复选框，且您需要区分它们，则需要为每个复选框提供一个唯一的标识符（例如，除了value，还可以使用data-id属性），并相应地修改存储和移除逻辑。
通过事件监听机制动态维护一个顺序数组，无论是使用jQuery还是原生JavaScript，都能够有效地解决复选框按选择顺序获取值的问题。这种方法提供了更高的用户交互数据准确性，适用于需要严格追踪用户操作序列的场景。开发者可以根据项目需求和对库的依赖选择合适的实现方式。
