页面中有5个复选框,1个按钮,点击按钮的时候打印选中的复选框数目
时间: 2024-02-22 09:55:52 浏览: 133
可以通过 jQuery 的选择器和事件来实现这个功能。
HTML 代码:
```html
<input type="checkbox" id="checkbox1" name="checkbox" value="1">复选框1
<input type="checkbox" id="checkbox2" name="checkbox" value="2">复选框2
<input type="checkbox" id="checkbox3" name="checkbox" value="3">复选框3
<input type="checkbox" id="checkbox4" name="checkbox" value="4">复选框4
<input type="checkbox" id="checkbox5" name="checkbox" value="5">复选框5
<button id="btn">统计选中的复选框</button>
```
JavaScript 代码:
```javascript
$(function() {
$('#btn').click(function() {
var count = $('input[name="checkbox"]:checked').length;
console.log('选中了 ' + count + ' 个复选框');
});
});
```
在上面的代码中,我们首先使用 jQuery 的 $() 方法获取按钮元素,然后为其绑定一个 click 事件。在 click 事件中,我们使用 jQuery 的选择器 `input[name="checkbox"]:checked` 来获取所有选中的复选框,然后使用 length 属性来获取选中的复选框数目。最后,我们使用 console.log() 方法将选中的复选框数目打印到控制台上。
注意,我们在选择器中使用了 `name="checkbox"` 来选择所有的复选框,这是因为所有的复选框都有相同的 name 属性,而我们只想选择这些复选框,而不选择其他的复选框。
阅读全文