首页 > 其他 > 详细

checkbox的全选,全不选,反选功能

时间:2019-12-20 13:56:06      阅读:83      评论:0      收藏:0      [点我收藏+]
 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>

checkbox的全选,全不选,反选功能

原文:https://www.cnblogs.com/ustc-yy/p/12072552.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!