jQuery反选怎么实现
时间: 2024-01-30 19:08:33 浏览: 26
jQuery实现反选功能可以通过以下步骤:
1. 给表格中的全选按钮和每个复选框添加一个class,例如我们可以给全选按钮添加`check_all`的class,给每个复选框添加`check_item`的class。
2. 监听全选按钮的click事件,当全选按钮被点击时,将所有的复选框的checked属性值设置为与全选按钮相反的值。
3. 监听每个复选框的click事件,当任意一个复选框被点击时,检查是否所有的复选框都被选中,如果是,则将全选按钮的checked属性值设置为true,否则设置为false。
下面是一份简单的代码示例:
```html
<table>
<thead>
<tr>
<th><input type="checkbox" class="check_all"></th>
<th>选项1</th>
<th>选项2</th>
<th>选项3</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>值1</td>
<td>值2</td>
<td>值3</td>
</tr>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>值4</td>
<td>值5</td>
<td>值6</td>
</tr>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>值7</td>
<td>值8</td>
<td>值9</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
// 全选/反选功能
$('.check_all').click(function() {
$('.check_item').prop('checked', !$('.check_item').prop('checked'));
});
// 反选功能
$('.check_item').click(function() {
var is_all_checked = true;
$('.check_item').each(function() {
if (!$(this).prop('checked')) {
is_all_checked = false;
}
});
$('.check_all').prop('checked', is_all_checked);
});
});
</script>
```
在上面的代码中,我们首先使用jQuery监听了全选按钮和每个复选框的click事件,然后实现了全选/反选和反选功能。
实现全选/反选功能的代码非常简单,只需要在全选按钮的click事件中,将所有复选框的checked属性值设置为与全选按钮相反的值即可。
实现反选功能的代码稍微复杂一些,我们需要遍历所有的复选框,检查它们是否都被选中,如果是,则将全选按钮的checked属性值设置为true,否则设置为false。