综合案例 复选框

5.1、案例效果

复选框-案例效果.png

5.2、分析和实现

功能分析

  • 全选
      1. 为全选按钮绑定单击事件。
      2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。
  • 全不选
      1. 为全不选按钮绑定单击事件。
      2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。
  • 反选
      1. 为反选按钮绑定单击事件
      2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。

代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>复选框</title>
  7. </head>
  8. <body>
  9.     <table id="tab1" border="1" width="800" align="center">
  10.         <tr>
  11.             <th style="text-align: left">
  12.                 <input style="background:lightgreen" id="selectAll" type="button" value="全选">
  13.                 <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
  14.                 <input style="background:lightgreen" id="reverse" type="button" value="反选">
  15.             </th>
  17.             <th>分类ID</th>
  18.             <th>分类名称</th>
  19.             <th>分类描述</th>
  20.             <th>操作</th>
  21.         </tr>
  22.         <tr>
  23.             <td><input type="checkbox" class="item"></td>
  24.             <td>1</td>
  25.             <td>手机数码</td>
  26.             <td>手机数码类商品</td>
  27.             <td><a href="">修改</a>|<a href="">删除</a></td>
  28.         </tr>
  29.         <tr>
  30.             <td><input type="checkbox" class="item"></td>
  31.             <td>2</td>
  32.             <td>电脑办公</td>
  33.             <td>电脑办公类商品</td>
  34.             <td><a href="">修改</a>|<a href="">删除</a></td>
  35.         </tr>
  36.         <tr>
  37.             <td><input type="checkbox" class="item"></td>
  38.             <td>3</td>
  39.             <td>鞋靴箱包</td>
  40.             <td>鞋靴箱包类商品</td>
  41.             <td><a href="">修改</a>|<a href="">删除</a></td>
  42.         </tr>
  43.         <tr>
  44.             <td><input type="checkbox" class="item"></td>
  45.             <td>4</td>
  46.             <td>家居饰品</td>
  47.             <td>家居饰品类商品</td>
  48.             <td><a href="">修改</a>|<a href="">删除</a></td>
  49.         </tr>
  50.     </table>
  51. </body>
  52. <script src="js/jquery-3.3.1.min.js"></script>
  53. <script>
  54.     //全选
  55.     //1.为全选按钮添加单击事件
  56.     $("#selectAll").click(function(){
  57.         //2.获取所有的商品复选框元素，为其添加checked属性，属性值true
  58.         $(".item").prop("checked",true);
  59.     });
  62.     //全不选
  63.     //1.为全不选按钮添加单击事件
  64.     $("#selectNone").click(function(){
  65.         //2.获取所有的商品复选框元素，为其添加checked属性，属性值false
  66.         $(".item").prop("checked",false);
  67.     });
  70.     //反选
  71.     //1.为反选按钮添加单击事件
  72.     $("#reverse").click(function(){
  73.         //2.获取所有的商品复选框元素，为其添加checked属性，属性值是目前相反的状态
  74.         let items = $(".item");
  75.         items.each(function(){
  76.             $(this).prop("checked",!$(this).prop("checked"));
  77.         });
  78.     });
  79. </script>
  80. </html>