判断复选框被选中的个数
时间: 2023-05-29 12:04:56 浏览: 62
可以通过遍历所有复选框,判断每个复选框是否被选中,最后统计被选中的个数。
代码示例:
```javascript
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var count = 0;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
count++;
}
}
console.log('选中的个数是:' + count);
```
相关问题
Javascript 统计复选框选中个数
你可以使用以下代码来统计复选框选中的个数:
```javascript
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var count = 0;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
count++;
}
}
console.log(count + ' checkboxes are checked.');
```
首先,我们使用 `document.querySelectorAll()` 方法获取所有类型为复选框的元素,并将它们存储在 `checkboxes` 变量中。
然后,我们使用一个循环遍历所有复选框元素,并检查它们是否被选中。如果是,我们将选中的计数加1。
最后,我们将选中数目输出到控制台中。
Javascript 统计复选框选中个数并显示在html中
你可以使用以下代码来统计复选框选中的个数并将其显示在HTML中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Count Checked Checkboxes in JavaScript</title>
</head>
<body>
<label><input type="checkbox" id="checkbox1" value="1">Checkbox 1</label>
<label><input type="checkbox" id="checkbox2" value="2">Checkbox 2</label>
<label><input type="checkbox" id="checkbox3" value="3">Checkbox 3</label>
<p>Checked checkboxes: <span id="count">0</span></p>
<script>
// Get all checkboxes
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// Add event listener to each checkbox
checkboxes.forEach((checkbox) => {
checkbox.addEventListener('change', () => {
// Get checked checkboxes
const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
// Update count
document.getElementById('count').textContent = checkedCheckboxes.length;
})
});
</script>
</body>
</html>
```
这段代码会在页面中创建三个复选框和一个包含选中复选框数量的`<span>`元素。当复选框选中状态改变时,`change`事件会被触发,然后使用`querySelectorAll`方法获取选中的复选框,并将选中的数量更新到`<span>`元素中。