JS实现复选框的全选/全不选

比较简单直接上demo代码

html:

 1         <table border="1px solid" cellspacing="0px" bordercolor="red" width="500px" align="center" style="text-align: center;">
 2             <thead>
 3                 <th>点击右侧实现全选/全不选</th>
 4                 <th>
 5                     <input type="checkbox" name="IsAll" id="IsAll" onclick="isCheck()" />
 6                 </th>
 7             </thead>
 8             <tbody>
 9                 <tr>
10                     <td>
11                         张三
12                     </td>
13                     <td>
14                         <input type="checkbox" name="c1" />
15                     </td>
16                 </tr>
17                 <tr>
18                     <td>
19                         李四
20                     </td>
21                     <td>
22                         <input type="checkbox" name="c1" />
23                     </td>
24                 </tr>
25             </tbody>
26         </table>

 

JS代码：

 

 1     function isCheck(){
 2                 var IsCheck= document.getElementById("IsAll");
 3                 if(IsCheck.checked==false){
 4                     var groupC= document.getElementsByName("c1");
 5                     for(var i=0;i<groupC.length;i++){
 6                         groupC[i].checked=false;
 7                     }
 8                 }
 9                 if (IsCheck.checked==true) {
10                     var groupC= document.getElementsByName("c1");
11                     for(var i=0;i<groupC.length;i++){
12                         groupC[i].checked=true;
13                     }
14                 }
15                 }

 

posted @ 2019-07-11 22:18  我叫张小凡  阅读(2002)  评论(0)  编辑  收藏  举报