<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 全选,全不选,反选 </title>
</head>
<body>
<input type="checkbox">男
<input type="checkbox">女
<input type="checkbox">保密
<hr>
<button id="all">全选</button>
<button id="allno">全不选</button>
<button id="reverse">反选</button>
<script>
// 找到所有的checkbox
var inList = document.getElementsByTagName('input');
// 全选的点击事件 checked 选中
document.getElementById('all').onclick = function () {
for (var i = 0; i < inList.length; i++) {
inList[i].checked = true;
}
}
// 全不选的点击事件 checked 选中
document.getElementById('allno').onclick = function () {
for (var i = 0; i < inList.length; i++) {
inList[i].checked = false;
}
}
// 反选的点击事件
document.getElementById('reverse').onclick = function () {
for (var i = 0; i < inList.length; i++) {
// 初阶 - 老套 if判断
// if(inList[i].checked) {
// inList[i].checked = false;
// } else{
// inList[i].checked = true;
// }
// 中阶 - 三元运算
// inList[i].checked = inList[i].checked ? false : true;
// 高阶 - 取反
// 原来是true就要给false，原来是false就要给true
// 所以相当于其实就是给原来的值取反
inList[i].checked = !inList[i].checked;
}
}
</script>
</body>
</html>
网友评论