全选与反选功能
1. 主要功能
- 全选：点击全选按钮,所有复选框都被选中
- 反选：点击反选按钮,所有复选框状态取反
2. 代码实现
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全选与反选</title>
</head>
<body>
<button id="btn1">1.全选</button>
<button id="btn2">2.反选</button><br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script>
let btn1 = document.querySelector("#btn1");
let btn2 = document.querySelector("#btn2");
let boxes = document.querySelectorAll('input[type="checkbox"]');
console.log(boxes);
btn1.onclick = function(){
for(let b of boxes){
b.checked = true;
}
};
btn2.onclick = function(){
for(let b of boxes){
b.checked = !b.checked;
}
};
</script>
</body>
</html>
3. 展示效果
原文链接：https://qwert.blog.csdn.net/article/details/105352653
