javascript的表单复选框 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script>
 9             "use strict";
10             window.onload = function() {
11                 let allChkElt = document.getElementById("allChk");
12                 let aihaos = document.getElementsByName("aihao");
13                 allChkElt.onclick = function() {
14                     for (let i = 0; i < aihaos.length; i++) {
15                         aihaos[i].checked = allChkElt.checked;
16                     }
17                 }
18 
19                 for (let i = 0; i < aihaos.length; i++) {
20                     aihaos[i].onclick = function() {
21                         let count = 0;
22                         for (let j = 0; j < aihaos.length; j++) {
23                             // console.log(aihaos[j].checked);
24                             if (aihaos[j].checked) {
25                                 console.log(count);
26                                 count++;
27                             }
28                         }
29                         if (count === aihaos.length) {
30                             allChkElt.checked = true;
31                         } else {
32                             allChkElt.checked = false;
33                         }
34                     }
35                 }
36             }
37         </script>
38         <form action="service/form_action" method="get" name="level-form" id="form">
39             <input type="checkbox" name="" id="allChk">全选&emsp;&emsp;&emsp;&emsp;
40             <input type="checkbox" name="aihao" id="" value="smoke">抽烟&emsp;&emsp;
41             <input type="checkbox" name="aihao" id="" value="drink">喝酒&emsp;&emsp;
42             <input type="checkbox" name="aihao" id="" value="tt">烫头&emsp;&emsp;
43 
44         </form>
45     </body>
46 </html>

 

posted @ 2023-03-05 18:10  jason2018  阅读(4)  评论(0)  编辑  收藏  举报