全选（JS）
程序员文章站
2024-03-21 14:15:34
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
全选<input type="checkbox" id="all">
<p>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</p>
<script>
var all = document.querySelector('#all')
var checks = document.querySelectorAll('p input') // 单选都在p标签里
// 用一个变量来记录被选中单选的数量
var n = 0 // 默认一个都没有选
// 全选联动单选
// 全选按钮绑定属性改变的事件:change
all.onchange = function(){
console.log(this.checked)
// 所有单选checked属性跟全选的checked属性值一致
for(var i = 0; i < checks.length; i++){
checks[i].checked = this.checked
// 这里也要修改n
n = this.checked ? checks.length : 0
}
}
// 给每一个单选都绑上事件
for(var i = 0; i < checks.length; i++){
checks[i].onchange = function(){
// 如果当前是选中，n++,取消就--
this.checked ? n++ : n--
console.log(n)
// 判断n跟length是否相等
if(n === checks.length){
all.checked = true
}else{
all.checked = false
}
}
}
</script>
</body>
</html>
下一篇： js全选