这篇博客详细介绍了如何利用jQuery实现全选、反选和全不选的功能。通过监听'全选'、'反选'按钮及各个子复选框的点击事件，动态调整复选框的状态。当'全选'按钮被点击时，所有子复选框的状态会根据'全选'按钮的状态进行切换；当单个子复选框被点击时，'全选'按钮的状态会根据所有子复选框的状态更新；而'反选'按钮则会反转所有子复选框的选中状态。代码示例展示了具体的实现过程。
一、具体要求：
1、当点击’全选’按钮时，页面中所有的复选框都应该为选中状态。
1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。
1.2、当点击子复选框时，'全选'按钮应该是非选中状态。
2、当选中当前页面的所有子复选框时，'全选’按钮应该是’选中’状态。
3、点点击’全不选’按钮时，当前页面的所有复选框置为非选中状态。
4、当点击’反选’按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
二、思路：
-
获取元素
-
给全选 和反选分别添加点击事件
-
点击全选按钮的时候的事件
如果自己的状态是 true, 那么就让子复选框所有选项的 input 都是 true 如果自己的状态是 false, 那么就让子复选框所有选项的 input 都是 false 自己的状态是什么, 其他所有子复选框选项的状态就是什么 状态: 就是操作 checked 属性, 使用 prop 方法来设置 checked 属性 -
点击每一个选项按钮的时候
点击每一个的时候, 都要判断一下, 是不是所有的子复选框选项按钮都是 true 当点击的时候, 每一个子复选框都是 true, 那么全选按钮的 checked 就是 true 当点击的时候, 只要有一个子复选框是 false, 那么全选按钮的 checked 就是 false -
点击反选按钮的时候
每一个复选框选项的状态都是自己的反过来 也就是如果自己是 true 那么就变成 false 如果自己是 false, 那么就变成 true
注意：
当用attr取值时，真的为"checked",假的为"undefined";当用prop取值时，真的为"true",假的为"false"。
如 checked, selected ，都具有 true 和 false 两个属性的属性。
var xz = $("input").prop("checked");//判断复选框的状态
var ck = $("input").prop("checked",xz); //子复选框的状态与父复选框相同
三、具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { margin: 0; padding: 0; }
.box { width: 200px;
border: 10px solid #333;
margin: 50px auto;
padding: 20px; }
hr { margin: 20px 0; }
.fan { float: right; }
</style>
</head>
<body>
<div class="box">
<div class="fan">
<button>反选</button>
</div>
<div class="all">
全选<input type="checkbox">
</div>
<hr>
<div class="select">
选项一： <input type="checkbox"><br>
选项二： <input type="checkbox"><br>
选项三： <input type="checkbox"><br>
选项四： <input type="checkbox"><br>
</div>
</div>
<script src="jquery-3.4.0.js"></script>
<script>
//1.全选
$('.all > input').click(function(){
$('.select > input').prop('checked',this.checked)
})
//2.每一个选项按钮
$('.select > input').click(function(){
// 如果子复选框的 checked 都是 true, 那么全选按钮就是 true
// 如果子复选框里面有一个是 false, 那么全选按钮就是 false
// 定义一个变量假设子复选框都是 true
var flag = true;
$('.select input').each(function(index,item){
if(item.checked === false){
flag = false;
}
})
$('.all > input').prop('checked',flag)
})
// 3.反选
$('.fan button').click(function(){
// 让每一个 select 下面的 input 都改变自己的状态
$('.select > input').each(function(index,item){
item.checked = !item.checked
})
var flag = true;
$('.select > input').each(function(index,item){
if(item.checked === false){
flag = false;
}
})
$('.all input').prop('checked',flag)
})
</script>
</body>
</html>
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
