如何使用JavaScript或JQuery获取无类名/ID复选框选中值

没问题，我来帮你搞定这个场景——毕竟不是所有复选框都有现成的ID或类名可以抓。下面分原生JavaScript和jQuery两种方案，还有对应的事件绑定方式：

一、原生JavaScript实现 #

1. 实时监听复选框选中状态 #

因为没有ID和类名，我们可以直接通过标签选择器 input[type="checkbox"] 定位所有复选框，然后给每个绑定change事件（这是复选框状态变化最可靠的事件，不管是鼠标点击、键盘操作还是JS修改状态都会触发）。

代码示例：

// 获取页面上所有复选框元素
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');

// 遍历每个复选框，绑定change事件
allCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 判断当前复选框是否被选中
    if (this.checked) {
      console.log('选中的复选框value值：', this.value);
      // 这里可以根据需求处理value，比如存入数组或展示到页面
    } else {
      console.log('取消选中的复选框value值：', this.value);
    }
  });
});

2. 一次性获取所有已选中的复选框value #

如果不需要实时监听，只是想批量获取当前已选中的复选框值，可以用:checked伪类筛选：

// 筛选出所有已选中的复选框，再提取它们的value
const checkedValues = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
  .map(checkbox => checkbox.value);

console.log('当前所有已选中的复选框value：', checkedValues);

二、jQuery实现 #

1. 实时监听复选框选中状态 #

用jQuery的选择器 input[type="checkbox"] 定位元素，然后通过on()方法绑定change事件，逻辑和原生JS一致：

代码示例：

// 给所有复选框绑定change事件
$('input[type="checkbox"]').on('change', function() {
  if ($(this).is(':checked')) {
    console.log('选中的复选框value值：', $(this).val());
  } else {
    console.log('取消选中的复选框value值：', $(this).val());
  }
});

2. 一次性获取所有已选中的复选框value #

利用jQuery的:checked筛选器和map()方法批量提取值：

// 提取所有选中复选框的value并转为数组
const checkedValues = $('input[type="checkbox"]:checked').map(function() {
  return $(this).val();
}).get();

console.log('当前所有已选中的复选框value：', checkedValues);

关键事件说明 #

最适合复选框的状态监听事件是change，它在复选框的选中状态实际改变时才触发，比click更可靠——毕竟用户可能点击复选框的空白区域但没切换状态，click会触发但change不会，能避免无效逻辑执行。

内容的提问来源于stack exchange，提问作者big picture