本教程详细介绍了如何在web开发中，根据用户选择复选框的顺序来获取其值，而非默认的dom顺序。我们将通过事件监听机制，分别使用jquery的`on()`和原生javascript的`addeventlistener()`方法，配合数组操作实现动态管理选中项列表，确保输出结果精确反映用户的交互序列。
引言：理解复选框选择顺序的需求
在Web表单开发中，经常需要获取用户选中的复选框的值。然而，常见的做法，例如使用jQuery的$('input[name="mycheck"]:checked').each()方法，通常会按照这些复选框在DOM（文档对象模型）中的顺序返回它们的值，而不是用户实际点击选择的顺序。当业务逻辑要求严格遵循用户的交互序列时，这种默认行为便无法满足需求。例如，如果用户先选中“选项B”，再选中“选项C”，最后选中“选项A”，我们期望的结果数组是['B', 'C', 'A']，而非它们在HTML中定义的顺序。
为了解决这一问题，我们需要采用一种事件驱动的策略，实时追踪复选框的选中和取消选中状态，并动态维护一个反映选择顺序的列表。
核心原理：事件驱动的动态列表管理
实现按选择顺序获取复选框值的关键在于监听每个复选框的change事件。当用户点击复选框，其状态发生改变时，会触发此事件。我们在此事件处理函数中执行以下逻辑：
- 判断当前复选框的选中状态： 确定它是被选中（checked）还是被取消选中（unchecked）。
-
更新值列表：
- 如果复选框被选中，将其值添加到预先定义的列表中。
- 如果复选框被取消选中，则将该值从列表中移除。
通过这种方式，我们维护的列表将始终反映当前所有选中复选框的值，并且这些值将按照它们被选中的先后顺序排列。
立即学习“Java免费学习笔记（深入）”；
方法一：使用jQuery实现
jQuery提供了一套简洁的API来处理DOM事件和元素操作，使得实现上述逻辑变得相对容易。
HTML结构示例
假设我们有以下一组复选框：
<label for="check-1">check 1</label> <input type="checkbox" id="check-1" value="1" name="mycheck"> <label for="check-2">check 2</label> <input type="checkbox" id="check-2" value="2" name="mycheck"> <label for="check-3">check 3</label> <input type="checkbox" id="check-3" value="3" name="mycheck">
jQuery代码实现
我们将使用$(selector).on("change", handler)方法来监听所有复选框的change事件。
// 引入 jQuery 库 (例如通过 CDN)
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
var selectionOrderList = []; // 用于存储选择顺序的数组
$('input[name="mycheck"]').on("change", function(e) {
let boxValue = $(this).val(); // 获取当前复选框的值
if ($(this).is(':checked')) {
// 如果复选框被选中，将其值添加到数组末尾
selectionOrderList.push(boxValue);
} else {
// 如果复选框被取消选中，从数组中移除其值
// 使用 jQuery.grep() 方法过滤掉取消选中的值
selectionOrderList = $.grep(selectionOrderList, function(item) {
return boxValue !== item;
});
}
console.log("当前选择顺序：", selectionOrderList);
});代码示例（完整）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery - 按选择顺序获取复选框值</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h3>请选择以下复选框：</h3>
<label for="check-1">check 1</label>
<input type="checkbox" id="check-1" value="1" name="mycheck">
<br>
<label for="check-2">check 2</label>
<input type="checkbox" id="check-2" value="2" name="mycheck">
<br>
<label for="check-3">check 3</label>
<input type="checkbox" id="check-3" value="3" name="mycheck">
<script>
var selectionOrderList = []; // 用于存储选择顺序的数组
$('input[name="mycheck"]').on("change", function(e) {
let boxValue = $(this).val(); // 获取当前复选框的值
if ($(this).is(':checked')) {
// 如果复选框被选中，将其值添加到数组末尾
selectionOrderList.push(boxValue);
} else {
// 如果复选框被取消选中，从数组中移除其值
// 使用 jQuery.grep() 方法过滤掉取消选中的值
selectionOrderList = $.grep(selectionOrderList, function(item) {
return boxValue !== item;
});
}
console.log("当前选择顺序：", selectionOrderList);
});
</script>
</body>
</html>注意事项
- jQuery库依赖： 此方法需要页面中引入jQuery库才能正常工作。
- $.grep()： $.grep()方法用于从数组中过滤元素，它会返回一个新的数组，不改变原数组。因此，我们需要将返回值重新赋值给selectionOrderList。
- 事件委托： 对于动态添加的复选框，可以考虑使用事件委托（例如$(document).on("change", 'input[name="mycheck"]', function(){...})）来确保事件监听的有效性。
方法二：使用原生JavaScript实现
对于不希望引入额外库的项目，或者追求更高性能和更小文件体积的场景，可以使用原生JavaScript来实现相同的功能。
HTML结构示例
与jQuery示例相同，我们使用以下HTML结构：
<label for="check-1">check 1</label> <input type="checkbox" id="check-1" value="1" name="mycheck"> <label for="check-2">check 2</label> <input type="checkbox" id="check-2" value="2" name="mycheck"> <label for="check-3">check 3</label> <input type="checkbox" id="check-3" value="3" name="mycheck">
原生JS代码实现
我们将使用document.querySelectorAll()获取所有目标复选框，然后通过forEach()遍历它们，并为每个复选框添加addEventListener("change", handler)事件监听器。
var selectionOrderList = []; // 用于存储选择顺序的数组
// 获取所有 name 为 "mycheck" 的 input 元素
document.querySelectorAll('input[name="mycheck"]').forEach(function (checkbox) {
// 为每个复选框添加 change 事件监听器
checkbox.addEventListener("change", function (event) {
let boxValue = event.target.value; // 获取触发事件的复选框的值
if (checkbox.checked) { // 或者 event.target.checked
// 如果复选框被选中，将其值添加到数组末尾
selectionOrderList.push(boxValue);
} else {
// 如果复选框被取消选中，从数组中移除其值
// 使用 Array.prototype.filter() 方法过滤掉取消选中的值
selectionOrderList = selectionOrderList.filter(function(item) {
return boxValue !== item;
});
}
console.log("当前选择顺序：", selectionOrderList);
});
});代码示例（完整）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JavaScript - 按选择顺序获取复选框值</title>
</head>
<body>
<h3>请选择以下复选框：</h3>
<label for="check-1">check 1</label>
<input type="checkbox" id="check-1" value="1" name="mycheck">
<br>
<label for="check-2">check 2</label>
<input type="checkbox" id="check-2" value="2" name="mycheck">
<br>
<label for="check-3">check 3</label>
<input type="checkbox" id="check-3" value="3" name="mycheck">
<script>
var selectionOrderList = []; // 用于存储选择顺序的数组
// 获取所有 name 为 "mycheck" 的 input 元素
document.querySelectorAll('input[name="mycheck"]').forEach(function (checkbox) {
// 为每个复选框添加 change 事件监听器
checkbox.addEventListener("change", function (event) {
let boxValue = event.target.value; // 获取触发事件的复选框的值
if (checkbox.checked) { // 或者 event.target.checked
// 如果复选框被选中，将其值添加到数组末尾
selectionOrderList.push(boxValue);
} else {
// 如果复选框被取消选中，从数组中移除其值
// 使用 Array.prototype.filter() 方法过滤掉取消选中的值
selectionOrderList = selectionOrderList.filter(function(item) {
return boxValue !== item;
});
}
console.log("当前选择顺序：", selectionOrderList);
});
});
</script>
</body>
</html>注意事项
- 浏览器兼容性： querySelectorAll和forEach在现代浏览器中得到良好支持。对于IE11及更早版本，可能需要Polyfill或使用传统for循环。
- filter()方法： Array.prototype.filter()是一个非常实用的数组方法，它会创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。与$.grep()类似，它不改变原数组，因此需要将新数组重新赋值。
- 性能： 原生JavaScript通常在性能上略优于jQuery，因为它避免了库的额外开销。
总结
无论是使用jQuery还是原生JavaScript，实现按用户选择顺序获取复选框值的核心思想都是通过事件监听来动态管理一个列表。当复选框状态改变时，根据其选中或取消选中状态，相应地添加或移除其值。
- jQuery方法 提供了简洁的语法和强大的选择器，适合已引入jQuery的项目。
- 原生JavaScript方法 更加轻量级，没有外部依赖，适合对性能和文件大小有严格要求的项目。
选择哪种方法取决于项目的具体需求、团队的技术栈偏好以及对浏览器兼容性的要求。两种方法都能有效解决按选择顺序获取复选框值的问题，为用户交互提供更精确的数据反馈。
