jQuery/javascript实现全选全不选
Posted 没事做点事
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery/javascript实现全选全不选相关的知识，希望对你有一定的参考价值。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习</title> 5 <style type="text/css"> 6 *{margin:0px;padding:0px;} 7 table{width:100%;text-align:center;} 8 </style> 9 10 <script src="jquery.js"></script> 11 <script language="javascript"> 12 $(function(){ 13 //给全选的复选框添加事件 14 $("#all").click(function(){ 15 // this 全选的复选框 16 var userids=this.checked; 17 //获取name=box的复选框 遍历输出复选框 18 $("input[name=box]").each(function(){ 19 this.checked=userids; 20 }); 21 }); 22 23 //给name=box的复选框绑定单击事件 24 $("input[name=box]").click(function(){ 25 //获取选中复选框长度 26 var length=$("input[name=box]:checked").length; 27 //未选中的长度 28 var len=$("input[name=box]").length; 29 if(length==len){ 30 $("#all").get(0).checked=true; 31 }else{ 32 $("#all").get(0).checked=false; 33 } 34 }); 35 }); 36 37 38 </script> 39 </head> 40 <body> 41 <div> 42 <form action="" method="post"> 43 <table border="1px"> 44 <tr> 45 <th> 46 <input type="Checkbox" id="all"/>全选 47 </th> 48 <th>用户编号</th> 49 <th>用户账号</th> 50 <th>用户姓名</th> 51 <th>用户性别</th> 52 <th>用户年龄</th> 53 <th>家庭住址</th> 54 </tr> 55 <tr> 56 <td><input type="Checkbox" name="box" value="10010"/></td> 57 <td>10010</td> 58 <td>root</td> 59 <td>小别</td> 60 <td>男</td> 61 <td>22</td> 62 <td>河南</td> 63 </tr> 64 <tr> 65 <td><input type="Checkbox" name="box" value="10011"/></td> 66 <td>10011</td> 67 <td>root</td> 68 <td>小李</td> 69 <td>男</td> 70 <td>23</td> 71 <td>河南</td> 72 </tr> 73 <tr> 74 <td><input type="Checkbox" name="box" value="10012"/></td> 75 <td>10012</td> 76 <td>root</td> 77 <td>小赵</td> 78 <td>男</td> 79 <td>21</td> 80 <td>河南</td> 81 </tr> 82 <tr> 83 <td><input type="Checkbox" name="box" value="10013" /></td> 84 <td>10013</td> 85 <td>root</td> 86 <td>小周</td> 87 <td>男</td> 88 <td>25</td> 89 <td>河南</td> 90 </tr> 91 <tr> 92 <td><input type="Checkbox" name="box" value="10014" /></td> 93 <td>10014</td> 94 <td>root</td> 95 <td>小吴</td> 96 <td>男</td> 97 <td>20</td> 98 <td>河南</td> 99 </tr> 100 </table> 101 102 </form> 103 </div> 104 </body> 105 </html>
以上是关于jQuery/javascript实现全选全不选的主要内容，如果未能解决你的问题，请参考以下文章