<!DOCTYPE html>
<html lang="zh-CN">
<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>
<input type="checkbox" name="game" id="all">全选/反选
<input type="checkbox" name="game" id="csgo" class="item">csgo
<input type="checkbox" name="game" id="dota" class="item">dota
<input type="checkbox" name="game" id="lol" class="item">lol
<script>
// 获取全选反选元素
var all = document.querySelector('#all')
// 获取所有单独项元素
var item = document.querySelectorAll('.item')
// 给全选反选绑定点击事件
all.onclick = function () {
// 遍历所有单独项，全选反选被点击后把值赋值给所有单独项实现全选反选
for(var i = 0; i < item.length; i++) {
item[i].checked = all.checked
}
}
// 遍历每一个单独项，为每个单独项绑定点击事件
for(var i = 0; i < item.length; i++) {
item[i].onclick = function () {
// 设置统计变量
var count = 0
// 遍历每一个单独项，如果有其中一个被选中，统计变量加1
for(var j = 0; j < item.length; j++) {
if (item[j].checked) {
count++
}
}
// 根据选中数量决定是否全选
if (count === item.length) {
all.checked = true
}else {
all.checked = false
}
}
}
</script>
</body>
</html>js全选反选
画蛇添足
• 阅读
515
点赞
收藏
