<!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>
<h2>你最喜欢的水果</h2>
<input type="checkbox" id="all" />
<label for="all">全选</label>
<button id="reverse">反选</button>
<p>
<input type="checkbox" id="box1" class="fruit" />
<label for="box1">香蕉</label>
<input type="checkbox" id="box2" class="fruit" />
<label for="box2">橘子</label>
<input type="checkbox" id="box3" class="fruit" />
<label for="box3">苹果</label>
</p>
</body>
<script>
var all = document.getElementById("all");
var rev = document.getElementById("reverse");
var fruit = document.querySelectorAll(".fruit");
// 第一种 全选/全不选
/*all.onclick = function () {
var t = all.checked;
if (t === true) {
for (var i = 0; i < fruit.length; i++) {
fruit[i].checked = true;
}
} else {
for (var i = 0; i < fruit.length; i++) {
fruit[i].checked = false;
}
}
};*/
// 第二种 全选/全不选
all.onclick = function () {
for (var i = 0; i < fruit.length; i++) {
fruit[i].checked = this.checked;
}
};
// 反选
rev.onclick = function () {
for (var i = 0; i < fruit.length; i++) {
fruit[i].checked = !fruit[i].checked;
}
};
/*//第一种 单个全选中 全选也被选中
var fruitArr = Array.from(fruit); //转换为数组
fruitArr.forEach(function (item) {
item.onclick = function () {
// var t = fruitArr.every(function (item) {
// return item.checked === true;
// });
// all.checked = t;
//简写
all.checked = fruitArr.every((item) => item.checked);
};
});*/
// 第二种
var fruitArr = Array.from(fruit); //转换为数组
fruitArr.forEach(function (item) {
item.onclick = function () {
//给每个水果input绑定单击事件
var count = 0;
for (var j = 0; j < fruitArr.length; j++) {
if (fruitArr[j].checked) {
//如果遍历每个水果input是选中状态
count++; //计数
}
}
if (count === fruitArr.length) {
all.checked = true;
} else {
all.checked = false;
}
};
});
</script>
</html>
JavaScript--全选
最新推荐文章于 2024-07-17 15:26:15 发布
1412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
