JavaScript和jQuery怎么按用户选择顺序获取复选框的值

在表单交互场景中，用户勾选复选框的顺序往往有实际业务意义，比如商品筛选、权限配置等场景都需要按照用户操作顺序获取对应的值。但默认获取复选框值的方式会按照DOM结构顺序返回，无法匹配真实操作顺序，需要额外处理才能实现需求。

核心实现思路

不管是原生JavaScript还是jQuery实现，核心逻辑都是维护一个动态数组：当用户勾选某个复选框时，将该复选框的值追加到数组末尾；当用户取消勾选时，从数组中移除对应的值。最终这个数组的顺序就是用户的操作顺序。

原生JavaScript实现方式

首先准备基础的HTML复选框结构：

<div class="checkbox-group">
  <label><input type="checkbox" value="选项一">选项一</label>
  <label><input type="checkbox" value="选项二">选项二</label>
  <label><input type="checkbox" value="选项三">选项三</label>
  <label><input type="checkbox" value="选项四">选项四</label>
</div>
<button id="getVal">获取选中值</button>
<p id="result"></p>

接下来编写原生JavaScript逻辑：

// 维护选择顺序的数组
let selectedOrder = [];
// 获取所有复选框元素
const checkboxes = document.querySelectorAll('.checkbox-group input[type="checkbox"]');
// 遍历复选框绑定change事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const value = this.value;
    if (this.checked) {
      // 勾选时追加到数组末尾
      selectedOrder.push(value);
    } else {
      // 取消勾选时从数组中移除对应值
      const index = selectedOrder.indexOf(value);
      if (index > -1) {
        selectedOrder.splice(index, 1);
      }
    }
  });
});
// 点击按钮获取结果
document.getElementById('getVal').addEventListener('click', function() {
  document.getElementById('result').textContent = '选中顺序：' + selectedOrder.join('，');
});

jQuery实现方式

如果项目中已经引入了jQuery库，可以用更简洁的代码实现相同功能，HTML结构和上面一致，只需要替换逻辑部分：

// 维护选择顺序的数组
let selectedOrder = [];
// 给所有复选框绑定change事件
$('.checkbox-group input[type="checkbox"]').on('change', function() {
  const value = $(this).val();
  if ($(this).is(':checked')) {
    // 勾选时追加到数组末尾
    selectedOrder.push(value);
  } else {
    // 取消勾选时从数组中移除对应值
    const index = selectedOrder.indexOf(value);
    if (index > -1) {
      selectedOrder.splice(index, 1);
    }
  }
});
// 点击按钮获取结果
$('#getVal').on('click', function() {
  $('#result').text('选中顺序：' + selectedOrder.join('，'));
});

注意事项

• 数组操作时要先判断值是否存在，避免重复添加或者移除不存在的元素
• 如果页面有动态新增的复选框，需要给新增的元素也绑定对应的change事件，或者使用事件委托的方式绑定
• 如果需要重置选择状态，记得同时清空selectedOrder数组，避免数据残留

事件委托优化（针对动态内容）

如果复选框是动态生成的，可以用事件委托的方式绑定事件，避免重复绑定：

// 原生JavaScript事件委托
document.querySelector('.checkbox-group').addEventListener('change', function(e) {
  if (e.target.tagName === 'INPUT' && e.target.type === 'checkbox') {
    const value = e.target.value;
    if (e.target.checked) {
      selectedOrder.push(value);
    } else {
      const index = selectedOrder.indexOf(value);
      if (index > -1) {
        selectedOrder.splice(index, 1);
      }
    }
  }
});

jQuery的事件委托写法更简洁：

$('.checkbox-group').on('change', 'input[type="checkbox"]', function() {
  const value = $(this).val();
  if ($(this).is(':checked')) {
    selectedOrder.push(value);
  } else {
    const index = selectedOrder.indexOf(value);
    if (index > -1) {
      selectedOrder.splice(index, 1);
    }
  }
});

JavaScriptjQuerycheckbox复选框取值选择顺序修改时间：2026-07-20 12:45:24