js获取选中的复选框值
时间: 2023-07-15 17:10:38 浏览: 37
可以通过以下方式获取选中的复选框的值:
1. 使用querySelectorAll选择所有的复选框元素,并使用forEach遍历它们,检查哪些是被选中的,然后将其值添加到一个数组中:
```
let checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
let values = [];
checkboxes.forEach(function(checkbox) {
values.push(checkbox.value);
});
```
2. 使用querySelectorAll选择所有的复选框元素,并使用Array.from将其转换为数组,然后使用filter和map方法过滤出被选中的复选框元素,并将它们的值添加到一个数组中:
```
let checkboxes = Array.from(document.querySelectorAll('input[type=checkbox]'));
let checkedCheckboxes = checkboxes.filter(function(checkbox) {
return checkbox.checked;
});
let values = checkedCheckboxes.map(function(checkbox) {
return checkbox.value;
});
```
无论哪种方法,最终得到的是一个包含所有被选中的复选框的值的数组。
相关问题
js获取复选框选中的值
可以使用 JavaScript 来获取复选框选中的值。首先,可以通过 `document.getElementsByName()` 或 `document.querySelectorAll()` 方法选中所有的复选框元素,然后遍历每个元素,判断其是否被选中,如果被选中,则将其值保存到一个数组中。
以下是一个示例代码:
```javascript
var checkboxes = document.getElementsByName('myCheckbox');
var values = [];
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].checked) {
values.push(checkboxes[i].value);
}
}
console.log(values);
```
其中,`document.getElementsByName('myCheckbox')` 方法会返回页面中所有 `name` 属性为 `myCheckbox` 的元素,`checkboxes[i].checked` 属性表示当前元素是否被选中,`checkboxes[i].value` 属性表示当前元素的值。最终,`values` 数组中保存了所有被选中的复选框的值。
遍历获取每个选中复选框的值
如果你是在Web开发中,可以通过以下代码遍历获取每个选中复选框的值:
```javascript
// 获取所有选中的复选框元素
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
// 遍历每个选中的复选框,获取它的值
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
var value = checkbox.value;
console.log(value);
}
```
这段代码会首先获取所有被选中的复选框元素,然后遍历每个选中的复选框,获取它的值,并输出到控制台中。