- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>input</title>
- <script src1="js/jquery-1.11.1.js"></script>
- <script>
- $(function(){
- $('#selectAll').click(function(){
- if($('#selectAll').is(':checked')){
- $('tbody').find('input').prop('checked',true);
- }else{
- $('tbody').find('input').prop('checked',false);
- }
- })
- $('tbody input').click(function(){
- var i=0;
- var arr=$('tbody').find('input').length;
- $('tbody input').each(function(){
- if($(this).is(':checked')){
- i++;
- };
- })
- if(i==arr){
- $('thead').find('input').prop('checked',true);
- }else{
- $('thead').find('input').prop('checked',false);
- }
- })
- })
- </script>
- </head>
- <body>
- <table style="width:50%;border:1px solid grey;text-align:center;">
- <thead>
- <tr>
- <td><input type="checkbox" id="selectAll">全选<td>
- <td>内容</td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><input type="checkbox"></td>
- <td>11</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>22</td>
- </tr>
- <tr>
- <td><input type="checkbox"></td>
- <td>33</td>
- </tr>
- <tr>
- <td></td>
- <td></td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/2511201514095.html
来源: http://www.codesnippet.cn/detail/2511201514095.html