<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<p><input type="checkbox" name="">1</p>
<p><input type="checkbox" name="">2</p>
<p><input type="checkbox" name="">3</p>
<p><input type="checkbox" name="">4</p>
</form>
<button onclick="getAll(0)">全选</button>
<button onclick="getAll(1)">全不选</button>
<button onclick="getAll(2)">反选</button>
<script type="text/javascript">
// 选中三个形式：1.用户点击（√） 2.在标签上添加checked属性 3.js中，checked=true
// 注意，返回的是多个元素，要用getElementsByTagName，加了s
let input = document.getElementsByTagName('input')
let but = document.getElementsByTagName('button')
console.log(input)
// but[0].onclick = function() {
// for(let i=0;i<input.length;i++){
// input[i].checked = true
// }
// }
// but[1].onclick = function() {
// for(let i=0;i<input.length;i++){
// input[i].checked = false
// }
// }
// but[2].onclick = function() {
// for(let i=0;i<input.length;i++){
// input[i].checked = !input[i].checked
// }
// }
// 封装为函数，进行优化
function getAll(num){
for(let i=0;i<input.length;i++){
if(num==0){
input[i].checked = true;
}else if(num==1){
input[i].checked = false;
}else{
input[i].checked = !input[i].checked;
}
}
}
</script>
</body>
</html>
