Select all and reverse selection (what is the difference between javacript&jQuery implementation)
1. JavaScript implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" id="all"> 全选
<hr>
<input type="checkbox"> 打游戏
<input type="checkbox"> 学习
<input type="checkbox"> 睡觉
<script>
//获取全选input
var _all=document.querySelector("#all");
//获取所有反选input
var _inputs=document.querySelectorAll("input:not(#all)");
//全选
_all.onclick=function(){
//1、获取全选的状态
var status=_all.checked;
//2、保证全选的checked值与反选一致
_inputs.forEach(function(tag){
tag.checked=status;
})
}
//反选
_inputs.forEach(function(tag){
//点击每一个复选框
tag.onclick=function(){
//过滤出当前已选中的所有复选框
var chboxes=Array.from(_inputs).filter(function(obj){
return obj.checked==true;
})
//如果选中的复选框个数=当前所有复选框个数
_all.checked=chboxes.length==_inputs.length
}
})
</script>
</body>
</html>
Renderings:
2. jQuery implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<input type="checkbox" class="all">全选
</p>
<p>
<input type="checkbox" value="游泳" id="hobby1"><label for="hobby1">游泳</label>
<input type="checkbox" value="爬山" id="hobby2"><label for="hobby2">爬山</label>
<input type="checkbox" value="听音乐" id="hobby3"><label for="hobby3">听音乐</label>
<input type="checkbox" value="学web" id="hobby4"><label for="hobby4">学web</label>
</p>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(function () {
var _all = $(".all")//获取全选框节点
var _inputs = $("input:not('.all')");//获取反选框节点
var arr = [];//定义空数组存放checked=true的元素
// 全选
_all.click(function () {
var status = _all.get(0).checked;//获取全选框的状态
// console.log(_all.checked);
_inputs.prop("checked", status);//反选框同步
})
// 反选
_inputs.click(function () {
// 判断反选框状态，存入数组
if (this.checked == true) {
arr.push(this.value);
} else {
arr.pop(this.value);
}
_all.prop("checked", arr.length == _inputs.length)
})
})
</script>
</body>
</html>
Renderings:
