如何获取所有选中的复选框

在前端开发中，我们经常需要处理表单数据。其中，复选框是一种特殊的表单元素，它可以允许用户选择多个选项。但是，当我们需要获取所有选中的复选框时，该怎么做呢？

1. 使用原生 JavaScript 实现

可以通过遍历所有的复选框元素，并判断其是否被选中来实现获取所有选中的复选框。

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const checkedArray = [];

for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkedArray.push(checkboxes[i]);
  }
}

console.log(checkedArray);

上述代码通过 querySelectorAll 方法获取所有的复选框元素，并使用 for 循环遍历它们。在循环中，通过 checked 属性判断当前元素是否被选中，并将选中的元素存储到 checkedArray 数组中。最后，通过 console.log 输出选中的元素数组。

2. 使用 jQuery 实现

如果你正在使用 jQuery 库，可以使用其提供的选择器和方法更加快捷地获取所有选中的复选框。

const checkedArray = $('input[type="checkbox"]:checked');

console.log(checkedArray);

上述代码通过 $ 函数和选择器定位所有已选中的复选框元素，将它们存储在 checkedArray 数组中。最后，同样使用 console.log 输出选中的元素数组。

总结

获取所有选中的复选框是前端开发中常见的需求之一，通过原生 JavaScript 或 jQuery 可以实现快速获取。需要注意的是，在处理表单数据时，还需要考虑到兼容性和安全性等问题。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10153