1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/jquery-1.12.4.js" ></script> 7 </head> 8 <body> 9 <table width="300" height="200" border="1"> 10 <tr > 11 <th> 12 全选<input type="checkbox" id="selectAll"/> 13 </th> 14 <th>姓名</th> 15 <th>年龄</th> 16 <th>地址</th> 17 </tr> 18 <tr class="row"> 19 <td><input type="checkbox" class="sel"/></td> 20 <td>张三</td> 21 <td>20</td> 22 <td>北京</td> 23 </tr> 24 <tr class="row"> 25 <td><input type="checkbox" class="sel"/></td> 26 <td>张三</td> 27 <td>20</td> 28 <td>北京</td> 29 </tr> 30 <tr class="row"> 31 <td><input type="checkbox" class="sel"/></td> 32 <td>张三</td> 33 <td>20</td> 34 <td>北京</td> 35 </tr> 36 </table> 37 <script type="text/javascript"> 38 $(function(){ 39 40 $("#selectAll").click(function(){ 41 42 43 $(".sel").prop("checked",$("#selectAll").prop("checked")); 44 45 46 47 }); 48 49 50 }); 51 52 53 </script> 54 </body> 55 </html>
实现效果图：
当点击标题的一行的全选的复选框时，下面的复选框全部被选中。