js获取checkbox选中的值-JavaScript实战：如何实现checkbox选中值获取

在前端开发中，经常会遇到需要获取checkbox选中的值的场景。那么，我们应该如何使用JavaScript来实现这个功能呢？下面，我将为大家详细介绍一下。

1.使用querySelectorAll方法

首先，我们可以使用querySelectorAll方法来获取所有的checkbox元素。这个方法返回一个NodeList对象，包含了文档中所有匹配指定CSS选择器的元素。接下来，我们可以遍历这个NodeList对象，并判断每个checkbox元素是否被选中。

javascript
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var selectedValues =[];
for (var i =0; i < checkboxes.length;i++){
  if (checkboxes[i].checked){
    selectedValues.push(checkboxes[i].value);
console.log(selectedValues);

在上面的代码中，我们定义了一个selectedValues数组来存储选中的值。然后，使用for循环遍历所有的checkbox元素，并通过checked属性来判断是否被选中。如果被选中，则将其value属性添加到selectedValues数组中。

2.使用getElementsByClassName方法

除了使用querySelectorAll方法，我们还可以使用getElementsByClassName方法来获取所有具有相同class名称的元素。这个方法返回一个HTMLCollection对象，包含了文档中所有具有指定class名称的元素。接下来，我们可以按照类似的方式遍历HTMLCollection对象，并判断每个checkbox元素是否被选中。

javascript
var checkboxes = document.getElementsByClassName('checkbox');
var selectedValues =[];
for (var i =0; i < checkboxes.length;i++){
  if (checkboxes[i].checked){
    selectedValues.push(checkboxes[i].value);
console.log(selectedValues);

与querySelectorAll方法相比，getElementsByClassName方法更加简洁，但需要注意的是，这个方法返回的是一个HTMLCollection对象。

imtoken钱包正版：https://qhdwitmed.com/danji/20121.html