码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-20 13:46:30      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:function   rip   ack   let   check   eve   put   listen   color   

 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的全选,全不选,反选功能

标签:function   rip   ack   let   check   eve   put   listen   color   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!