jquery checkbox 全选 全不选
时间: 2024-11-04 17:16:02 浏览: 10
jQuery 中处理复选框 (checkbox) 的全选和全不选功能通常通过添加事件监听器并操作 DOM 来实现。这里是一个简单的示例:
1. 首先,你需要选择所有的复选框元素,你可以使用 `$('input[type="checkbox"]')` 这样的 jQuery 选择器。
```javascript
var checkboxes = $('input[type="checkbox"]');
```
2. 接下来,创建两个函数,一个是全选 (check all),另一个是全不选 (uncheck all)。这两个函数都会遍历所有复选框,设置它们的 `checked` 属性。
```javascript
function checkAll() {
checkboxes.each(function() {
$(this).prop('checked', true);
});
}
function uncheckAll() {
checkboxes.each(function() {
$(this).prop('checked', false);
});
}
```
3. 要绑定到按钮点击事件上,比如你有两个按钮,一个用于全选,一个用于全不选:
```html
<button onclick="checkAll()">全选</button>
<button onclick="uncheckAll()">全不选</button>
```
4. 如果你想将这些函数关联到特定的复选框组,可以在选择复选框时传入选择器,例如只针对某个 id 或 class 的复选框。
现在,当你点击“全选”按钮时,所有复选框会被选中;点击“全不选”按钮则会取消所有复选框的选择。
阅读全文