jQuery对checkbox 复选框的全选全不选反选的操作
时间: 2023-10-07 07:06:05 浏览: 49
可以使用以下jQuery代码实现对checkbox复选框的全选、全不选和反选操作:
全选:
```javascript
$('input[type="checkbox"]').prop('checked', true);
```
全不选:
```javascript
$('input[type="checkbox"]').prop('checked', false);
```
反选:
```javascript
$('input[type="checkbox"]').each(function() {
$(this).prop('checked', !$(this).prop('checked'));
});
```
以上代码中,`$('input[type="checkbox"]')` 选择所有的checkbox元素,`.prop('checked', true/false)` 设置是否选中,`!$(this).prop('checked')` 判断当前元素是否选中。
相关问题
写一个多行表单,每一行前有一个checkbox框,且有一个用jQuery对下面复选框的全选全不选反选操作的checkbox
好的,以下是一个简单的多行表单,每一行前有一个checkbox框,并且有一个用jQuery对下面复选框的全选全不选反选操作的checkbox:
```html
<form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="select"></td>
<td>John Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td><input type="checkbox" name="select"></td>
<td>Jane Doe</td>
<td>jane@example.com</td>
</tr>
<tr>
<td><input type="checkbox" name="select"></td>
<td>Bob Smith</td>
<td>bob@example.com</td>
</tr>
</tbody>
</table>
<br>
<input type="checkbox" id="select-all"> Select All
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Select all checkbox
$('#select-all').click(function() {
$('input[name=select]').prop('checked', this.checked);
});
// Individual checkbox
$('input[name=select]').click(function() {
if (!this.checked) {
$('#select-all').prop('checked', false);
}
});
});
</script>
```
说明:
- 首先是一个表单元素,包含一个表格和一个全选的复选框。
- 表格包含两个表头列和多个表格行,每个表格行都有一个复选框。
- 最后是一个用于全选和取消全选的复选框。
- 在jQuery脚本中,我们使用`click()`方法来处理全选复选框和每个单独的复选框的单击事件。如果全选复选框被选中,则所有单独的复选框也会被选中。如果单独的复选框被取消选中,则全选复选框也会被取消选中。
jquery复选框全选
jquery复选框全选是指通过jquery库中的方法实现对多个复选框的全选或全不选操作。具体实现方法如下:
1. 给全选按钮绑定点击事件,获取所有的复选框元素。
2. 遍历所有的复选框元素,将它们的选中状态设置为全选按钮的选中状态。
代码示例:
```
// HTML代码
<input type="checkbox" id="checkAll">全选
<input type="checkbox" class="checkbox">选项1
<input type="checkbox" class="checkbox">选项2
<input type="checkbox" class="checkbox">选项3
// JS代码
$(function(){
// 给全选按钮绑定点击事件
$("#checkAll").click(function(){
// 获取所有的复选框元素
var checkboxes = $(".checkbox");
// 遍历所有的复选框元素,将它们的选中状态设置为全选按钮的选中状态
checkboxes.prop("checked", $(this).prop("checked"));
});
});
```