<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选,反选,全不选案例</title>
</head>
<body>
<input type="checkbox" name="interest"> 篮球 <br>
<input type="checkbox" name="interest"> 读书 <br>
<input type="checkbox" name="interest"> 电影 <br>
<input type="checkbox" name="interest"> 阅读 <br>
<hr>
<input type="checkbox" id="selectAllOrNot" name="selectAllOrNot"> 全选/全不选
<button id="reverseSelection">反选</button>
</body>
<script>
var interest = document.getElementsByName('interest');
var selectAllOrNot = document.getElementById('selectAllOrNot');
var reverseSelection = document.getElementById('reverseSelection');
// onchange 是改变状态, 应用场景有三个地方: checkbox, 单选的select, radio
selectAllOrNot.onchange = function () {
// 获取到当前所操作的 checkbox的状态, 值为true或者false
var status = this.checked;
// 让所有的interests的 checked 状态和 "全选/全不选" 状态保持一致。
for (var i = 0; i < interest.length; i++) {
interest[i].checked = status;
}
}
var interestLenght = interest.length;
//存在全部选择就把全选框自动勾上
function isMax() {
var num = 0;
var interestLenght = interest.length;
for (var j = 0; j < interestLenght; j++) {
// 如果有一个被选中，num就 +1
if (interest[j].checked) {
num++;
}
}
console.log('max');
// 根据选中数量与总长度是否相同来确定"全选/全不选"最终的选中状态
selectAllOrNot.checked = (num == interestLenght);
}
//循环的目的是给每个 interest 绑定改变事件。
for (var i = 0; i < interestLenght; i++) {
/**
* 每次对每个 interest改变之后, 判断所有的 interest 的状态. 判断的思路
* 是获取所有的选中的 interest 的数量, 然后与 interest的总数量做比较，如果
* 数量相同表示都被选中, 那么"全选/全不选"就要被选中，如果数量不相同，那么"全选/全不选"就不选中
*/
interest[i].onchange = isMax;//对事件赋值函数,只需要函数名
}
//反选事件
reverseSelection.onclick = function () {
console.log('dgf');
for (var i = 0; i < interestLenght; i++) {
interest[i].checked = !interest[i].checked;
}
isMax();//执行函数
}
</script>
</html>
改进版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="checkbox" name="interest"> 篮球 <br>
<input type="checkbox" name="interest"> 读书 <br>
<input type="checkbox" name="interest"> 电影 <br>
<input type="checkbox" name="interest"> 阅读 <br>
<hr>
<input type="checkbox" id="selectAllOrNot" name="selectAllOrNot"> 全选/全不选
<button id="reverseSelection">反选</button>
</body>
<script>
var interest = document.getElementsByName('interest');
var selectAllOrNot = document.getElementById('selectAllOrNot');
var reverseSelection = document.getElementById('reverseSelection')
// onchange 是改变状态, 应用场景有三个地方: checkbox, 单选的select, radio
selectAllOrNot.onchange = function () {
// 获取到当前所操作的 checkbox的状态, 值为true或者false
var status = this.checked;
// 让所有的interests的 checked 状态和 "全选/全不选" 状态保持一致。
for (var i = 0; i < interest.length; i++) {
interest[i].checked = status;
}
}
var interestLenght = interest.length;
//循环的目的是给每个 interest 绑定改变事件。
for (var i = 0; i < interestLenght; i++) {
/**
* 每次对每个 interest改变之后, 判断所有的 interest 的状态. 判断的思路
* 是获取所有的选中的 interest 的数量, 然后与 interest的总数量做比较，如果
* 数量相同表示都被选中, 那么"全选/全不选"就要被选中，如果数量不相同，那么"全选/全不选"就不选中
*/
interest[i].onchange = function () {
var num = 0;
for (var j = 0; j < interestLenght; j++) {
// 如果有一个被选中，num就 +1
if (interest[j].checked) {
num++;
}
}
// 根据选中数量与总长度是否相同来确定"全选/全不选"最终的选中状态
selectAllOrNot.checked = (num == interestLenght);
}
}
//反选操作
reverseSelection.onclick = function () {
var flag = true;
for (var j = 0; j < interestLenght; j++) {
//各个选择的反选逻辑操作,true取false,false取true
if (interest[j].checked) {
flag=false;//在反选时,当有一个选项打钩,那么反选后,必定不会全部都被勾上,所以也不需要自动勾上全选框
interest[j].checked=false;
}else{
interest[j].checked=true;
}
}
selectAllOrNot.checked=flag;//interest[j]全为true就为true,有一个为false那么就为false。
}
</script>
</html>
效果图
