全选,全不选,反选

 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>
上一篇:Python神经网络编程笔记


下一篇:神经网络简易的框架