本教程详细介绍了如何在前端开发中，根据用户实际勾选复选框的顺序来获取其值，而非默认的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()方法来操作数组。
示例代码
jQuery按选择顺序获取复选框值 请按任意顺序勾选复选框：
当前选择顺序：
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(', ')); });
代码解析
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()方法。
示例代码
纯JavaScript按选择顺序获取复选框值 请按任意顺序勾选复选框：
当前选择顺序：
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(', '); }); });
代码解析
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操作和数组方法，核心思想都是一致的：实时响应用户交互，并根据交互更新数据状态。这种技术在需要用户明确选择顺序的场景（如多项排序、自定义流程等）中非常有用。
以上就是如何按用户选择顺序获取复选框的值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585196.html
微信扫一扫 
支付宝扫一扫 
