其他分享
首页 > 其他分享> > 全选,全不选,反选

全选,全不选,反选

作者:互联网

 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