实现复选框按选择顺序获取值：jQuery与原生JavaScript解决方案

本文将探讨如何通过事件监听机制，在用户选择或取消选择复选框时，动态维护一个数组，以确保复选框的值按照其被选中的先后顺序进行存储。我们将分别介绍基于jquery和原生javascript的实现方法，并提供详细的代码示例和解释，帮助开发者准确获取用户交互的顺序数据。

在Web开发中，我们经常需要获取用户通过复选框（checkbox）选择的数据。然而，如果仅仅使用$('input[name="mycheck"]:checked').each()这样的方法，通常只能按照DOM中元素的自然顺序获取已选中的值，而无法得知用户实际选择的先后顺序。例如，如果用户先选中“选项2”，再选中“选项3”，最后选中“选项1”，我们期望得到的结果是['2', '3', '1']，而非['1', '2', '3']。为了解决这一问题，我们需要采用事件驱动的方式，实时追踪用户的选择行为。

使用jQuery实现按选择顺序获取复选框值

通过jQuery，我们可以利用其强大的事件处理机制来监听复选框的状态变化。当复选框被选中时，将其值添加到我们的顺序数组中；当复选框被取消选中时，则从数组中移除对应的值。

HTML结构

首先，定义一组复选框，每个复选框都应有一个value属性，用于标识其值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="check-1">选项 1</label>
<input type="checkbox" id="check-1" value="1" name="mycheck">

<label for="check-2">选项 2</label>
<input type="checkbox" id="check-2" value="2" name="mycheck">

<label for="check-3">选项 3</label>
<input type="checkbox" id="check-3" value="3" name="mycheck">

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); // 每次状态变化后，在控制台输出当前顺序
});

代码解析：

稿定AI文案

小红书笔记、公众号、周报总结、视频脚本等智能文案生成平台

45

查看详情

1. var list = [];：初始化一个空数组，用于存储复选框的选中顺序。
2. $('input[name="mycheck"]').on("change", function(e) { ... });：为所有name属性为mycheck的input元素绑定change事件监听器。当这些复选框的状态发生变化（选中或取消选中）时，回调函数会被执行。
3. let boxval = $(this).val();：在事件回调中，$(this)指向触发事件的当前复选框。val()方法用于获取其value属性值。
4. if ($(this).is(':checked')) { ... }：使用is(':checked')判断当前复选框是否处于选中状态。
5. list.push(boxval);：如果复选框被选中，则将boxval添加到list数组的末尾，从而记录其选择顺序。
6. list = $.grep(list, function(item) { return boxval !== item; });：如果复选框被取消选中，$.grep()方法会遍历list数组。回调函数返回true的元素会被保留，返回false的元素（即与boxval相同的值）会被移除，从而更新list数组，保持其顺序性。

使用原生JavaScript实现按选择顺序获取复选框值

对于不依赖jQuery的项目，我们也可以纯粹使用原生JavaScript来实现相同的功能。

HTML结构

与jQuery示例相同，复选框的HTML结构保持不变。

<label for="check-1">选项 1</label>
<input type="checkbox" id="check-1" value="1" name="mycheck">

<label for="check-2">选项 2</label>
<input type="checkbox" id="check-2" value="2" name="mycheck">

<label for="check-3">选项 3</label>
<input type="checkbox" id="check-3" value="3" name="mycheck">

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); // 每次状态变化后，在控制台输出当前顺序
  });
});

代码解析：

1. document.querySelectorAll('input[name="mycheck"]')：使用querySelectorAll获取所有匹配选择器的元素，返回一个NodeList。
2. .forEach(function (box) { ... });：遍历NodeList中的每个复选框元素。
3. box.addEventListener("change", function (evt) { ... });：为每个复选框添加change事件监听器。
4. let boxval = evt.target.value;：在事件回调中，evt.target指向触发事件的元素，value属性获取其值。
5. if (true === box.checked) { ... }：box.checked是一个布尔属性，表示复选框是否被选中。
6. list.push(boxval);：选中时将值推入数组。
7. list = list.filter(function(val) { return boxval !== val; });：取消选中时，使用Array.prototype.filter()方法创建一个新数组，其中不包含被取消选中的值。

注意事项与总结

1. 初始状态处理： 上述两种方法都只在复选框状态发生变化时更新list数组。如果页面加载时某些复选框已是选中状态，并且您希望它们也按其DOM顺序（或预设顺序）包含在list中，您需要在页面加载完成后额外执行一次遍历，将初始选中的值添加到list中。
2. 性能考虑： 对于数量庞大的复选框，每次filter或grep操作都会遍历数组。虽然对于大多数Web应用场景，这通常不是性能瓶颈，但在极端情况下，可能需要考虑更优化的数据结构或算法。
3. 唯一性： 示例假设复选框的值是唯一的。如果存在相同值的复选框，且您需要区分它们，则需要为每个复选框提供一个唯一的标识符（例如，除了value，还可以使用data-id属性），并相应地修改存储和移除逻辑。

通过事件监听机制动态维护一个顺序数组，无论是使用jQuery还是原生JavaScript，都能够有效地解决复选框按选择顺序获取值的问题。这种方法提供了更高的用户交互数据准确性，适用于需要严格追踪用户操作序列的场景。开发者可以根据项目需求和对库的依赖选择合适的实现方式。

以上就是实现复选框按选择顺序获取值：jQuery与原生JavaScript解决方案的详细内容，更多请关注php中文网其它相关文章！