本教程详细介绍了如何在前端开发中，根据用户实际勾选复选框的顺序来获取其值，而非默认的dom元素顺序。我们将通过监听复选框的`change`事件，动态地向数组中添加或移除选中的值，从而精确地记录用户的选择序列。文章提供了基于jquery和纯javascript的两种实现方案，并附带详细代码示例与解释。
在构建用户界面时，我们经常需要获取用户通过复选框（checkbox）选择的数据。然而，标准的DOM查询方法，如$('input[name="mycheck"]:checked').each()，通常会按照复选框在HTML文档中的顺序返回其值，而非用户实际勾选的顺序。例如，如果用户先勾选了第二个复选框，然后是第三个，最后是第一个，我们期望的结果是['2', '3', '1']，而不是['1', '2', '3']。为了解决这一问题，我们需要采用事件驱动的方式来动态维护一个表示选择顺序的数组。
核心实现思路
要实现按选择顺序获取复选框的值，关键在于：
- 监听事件： 捕获每个复选框的change事件，当其状态发生改变时触发相应逻辑。
-
动态维护数组：
- 当复选框被选中时，将其值添加到预先定义好的结果数组的末尾。
- 当复选框被取消选中时，从结果数组中移除其值，以保持数组的实时性和准确性。
通过这种方式，结果数组将始终反映用户当前的选中状态，并且值的顺序将严格按照用户勾选的先后顺序排列。
jQuery 实现方案
使用jQuery可以简洁地实现上述逻辑。我们利用on()方法监听change事件，并结合is(':checked')判断复选框状态，以及push()和$.grep()方法来操作数组。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<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">选项 1</label>
<input type="checkbox" id="check-1" value="1" name="mycheck">
<br>
<label for="check-2">选项 2</label>
<input type="checkbox" id="check-2" value="2" name="mycheck">
<br>
<label for="check-3">选项 3</label>
<input type="checkbox" id="check-3" value="3" name="mycheck">
<br>
<p>当前选择顺序：<span id="result-jquery"></span></p>
<script>
var selectedOrderList = []; // 用于存储选择顺序的数组
// 监听所有name为'mycheck'的input元素的change事件
$('input[name="mycheck"]').on("change", function() {
let boxValue = $(this).val(); // 获取当前复选框的值
if ($(this).is(':checked')) {
// 如果复选框被选中，将其值添加到数组末尾
selectedOrderList.push(boxValue);
} else {
// 如果复选框被取消选中，从数组中移除其值
selectedOrderList = $.grep(selectedOrderList, function(item) {
return boxValue !== item; // 过滤掉被取消选中的值
});
}
// 在控制台和页面上显示当前选择顺序
console.log("jQuery选择顺序:", selectedOrderList);
$('#result-jquery').text(selectedOrderList.join(', '));
});
</script>
</body>
</html>代码解析
- var selectedOrderList = [];: 初始化一个空数组，用于存储按选择顺序排列的复选框值。
- $('input[name="mycheck"]').on("change", function() { ... });: 这是一个事件委托，它会监听所有name属性为mycheck的input元素上的change事件。每当这些复选框的状态发生变化（被选中或取消选中）时，回调函数就会执行。
- let boxValue = $(this).val();: 在事件回调中，$(this)指向触发事件的当前复选框。val()方法用于获取其value属性。
-
if ($(this).is(':checked')) { ... }: 判断当前复选框是否处于选中状态。
- 如果是选中状态，selectedOrderList.push(boxValue);将复选框的值添加到selectedOrderList数组的末尾。
- 如果不是选中状态（即被取消选中），selectedOrderList = $.grep(selectedOrderList, function(item) { return boxValue !== item; });使用$.grep()方法过滤掉数组中与当前复选框值相同的元素。$.grep()会遍历数组，并返回一个新数组，其中包含回调函数返回true的元素。
纯 JavaScript 实现方案
对于不使用jQuery的项目，我们可以使用纯JavaScript（Vanilla JS）来实现相同的功能。这涉及到querySelectorAll()、forEach()和addEventListener()等DOM操作方法，以及数组的push()和filter()方法。
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯JavaScript按选择顺序获取复选框值</title>
</head>
<body>
<h3>请按任意顺序勾选复选框：</h3>
<label for="check-1-vanilla">选项 1</label>
<input type="checkbox" id="check-1-vanilla" value="1" name="mycheck-vanilla">
<br>
<label for="check-2-vanilla">选项 2</label>
<input type="checkbox" id="check-2-vanilla" value="2" name="mycheck-vanilla">
<br>
<label for="check-3-vanilla">选项 3</label>
<input type="checkbox" id="check-3-vanilla" value="3" name="mycheck-vanilla">
<br>
<p>当前选择顺序：<span id="result-vanilla"></span></p>
<script>
var selectedOrderListVanilla = []; // 用于存储选择顺序的数组
// 获取所有name为'mycheck-vanilla'的input元素
document.querySelectorAll('input[name="mycheck-vanilla"]').forEach(function(box) {
// 为每个复选框添加change事件监听器
box.addEventListener("change", function(evt) {
let boxValue = evt.target.value; // 获取触发事件的复选框的值
if (true === box.checked) {
// 如果复选框被选中，将其值添加到数组末尾
selectedOrderListVanilla.push(boxValue);
} else {
// 如果复选框被取消选中，从数组中移除其值
selectedOrderListVanilla = selectedOrderListVanilla.filter(function(val) {
return boxValue !== val; // 过滤掉被取消选中的值
});
}
// 在控制台和页面上显示当前选择顺序
console.log("Vanilla JS选择顺序:", selectedOrderListVanilla);
document.getElementById('result-vanilla').textContent = selectedOrderListVanilla.join(', ');
});
});
</script>
</body>
</html>代码解析
- var selectedOrderListVanilla = [];: 同样初始化一个空数组。
- document.querySelectorAll('input[name="mycheck-vanilla"]'): 使用querySelectorAll获取所有name属性为mycheck-vanilla的input元素，这会返回一个NodeList。
- .forEach(function(box) { ... });: 遍历上一步获取到的所有复选框元素。
- box.addEventListener("change", function(evt) { ... });: 为每个复选框单独添加一个change事件监听器。evt.target指向触发事件的元素。
- let boxValue = evt.target.value;: 获取当前复选框的值。
-
if (true === box.checked) { ... }: 判断当前复选框的checked属性是否为true。
- 如果是选中状态，selectedOrderListVanilla.push(boxValue);将值添加到数组末尾。
- 如果不是选中状态，selectedOrderListVanilla = selectedOrderListVanilla.filter(function(val) { return boxValue !== val; });使用数组的filter()方法来创建一个新数组，其中不包含被取消选中的值。
注意事项
- 唯一性： 确保每个复选框的value属性是唯一的，否则在取消选中时可能会意外移除其他具有相同值的元素。
- 初始状态： 如果页面加载时有复选框默认是选中状态，需要额外逻辑在页面加载时将这些初始选中的值按其DOM顺序添加到数组中。或者，可以强制用户重新勾选以建立选择顺序。本教程中的示例假设初始状态所有复选框都未选中。
- 性能： 对于数量庞大的复选框列表，纯JavaScript的addEventListener可能比jQuery的事件委托在初始化时稍显复杂，但两者在实际运行时性能差异通常不大。事件委托（如jQuery示例所示）在处理大量动态生成的元素时更具优势，因为它只需要一个监听器。
- 数据持久化： 如果需要在页面刷新后保留用户的选择顺序，需要结合Web Storage（localStorage或sessionStorage）或后端存储机制。
总结
通过监听复选框的change事件并动态维护一个数组，我们可以精确地按照用户勾选的顺序来获取复选框的值。无论是使用jQuery提供的便捷方法，还是采用纯JavaScript的DOM操作和数组方法，核心思想都是一致的：实时响应用户交互，并根据交互更新数据状态。这种技术在需要用户明确选择顺序的场景（如多项排序、自定义流程等）中非常有用。
