全选，全不选，反选
作者：互联网
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <script>
8 window.onload = function () {
9 let btns = document.getElementsByTagName('button');
10 let inputs = document.getElementById('bottom').getElementsByTagName('input');
11 btns[0].addEventListener('click', function () {
12 for (let i = 0; i < inputs.length; i++) {
13 inputs[i].checked = true;
14 // console.log(1)
15 }
16 });
17 btns[1].addEventListener('click', function () {
18 for (let i = 0; i < inputs.length; i++) {
19 inputs[i].checked = false;
20 }
21 });
22 btns[2].addEventListener('click', function () {
23 for (let i = 0; i < inputs.length; i++) {
24 inputs[i].checked = inputs[i].checked ? false : true;
25 }
26 });
27 }
28 </script>
29 <body>
30 <div id="top">
31 <button>全选</button>
32 <button>取消</button>
33 <button>反选</button>
34 </div>
35 <div id="bottom">
36 <ul>
37 <li>选项: <input type="checkbox"></li>
38 <li>选项: <input type="checkbox"></li>
39 <li>选项: <input type="checkbox"></li>
40 <li>选项: <input type="checkbox"></li>
41 <li>选项: <input type="checkbox"></li>
42 <li>选项: <input type="checkbox"></li>
43 <li>选项: <input type="checkbox"></li>
44 <li>选项: <input type="checkbox"></li>
45 <li>选项: <input type="checkbox"></li>
46 <li>选项: <input type="checkbox"></li>
47 </ul>
48 </div>
49 </body>
50 </html>
标签：选项,inputs,checked,function,反选,全选,let,全不选,btns 来源： https://www.cnblogs.com/ustc-yy/p/12072552.html