全选/全不选/反选

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    7.   <script type="text/javascript">
    8.     $(function (){
    9.       //全选
    10.       $("#all").click(function (){
    11.         $(":checkbox").prop("checked",true);
    12.       })
    13.       //全不选
    14.       $("#none").click(function (){
    15.         $(":checkbox").prop("checked",false);
    16.       })
    17.       //反选
    18.       $("#reverse").click(function (){
    19.         $(":checkbox[name='checkbox002']").each(function (){//遍历checkbox类型且name属性为checkbox002的选项
    20.           //在each函数中有一个this对象是DOM对象
    21.           this.checked = !this.checked;
    22.         })
    23.       })
    25.       //全选/全不选
    26.       $("#allOrNone").click(function (){
    27.        //this对象是当前响应事件的DOM对象
    28.        //  this.checked就表示全选/全不选的状态
    29.         //这个状态要和下面四个的状态相同
    30.         $(":checkbox[name='checkbox002']").prop("checked",this.checked);
    31.       });
    32.       //满选与非满选
    33.       $(":checkbox[name='checkbox002']").click(function (){
    34.         var allCount =$(":checkbox[name='checkbox002']").length;
    36.         var checkCount =$(":checkbox[name='checkbox002']:checked").length;
    38.         $("#allOrNone").prop("checked",allCount == checkCount);
    39.       });
    40.     });
    42.   </script>
    43. </head>
    44. <body>
    45.       <table>
    46.         <tr>
    47.           <td>你喜欢的运动是？</td>
    48.           <td><input type="checkbox"   id="allOrNone"/>全选/全不选</td>
    49.         </tr>
    50.         <tr>
    51.           <td>
    52.           <input type="checkbox" name="checkbox002" value="basketball"/>篮球
    53.           <input type="checkbox" name="checkbox002" value="football"/>足球
    54.           <input type="checkbox" name="checkbox002" value="ping-pongBall"/>乒乓球
    55.           <input type="checkbox" name="checkbox002" value="badminton"/>羽毛球
    56.           </td>
    57.         </tr>
    58.         <tr>
    59.           <td>
    60.             <button type="button" name="button003" id="all" value="checkAll"/>全选
    61.             <button type="button" name="button003" id="none" value="checkNone"/>全不选
    62.             <button type="button" name="button003" id="reverse" value="checkReverse"/>反选
    63.           </td>
    64.         </tr>
    65.       </table>
    66. </body>
    67. </html>