通过vue或jQuery实现checkbox全选反选的方法

全选反选多数适用于购物车中,下面介绍两种实现类似购物车的checkbox全选反选的方法

第一种:通过jQuery实现全选反选

效果图:

 实现代码:

<!DOCTYPE html>
<html>

<head >
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div >
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox"  />
                    </th>
                    <th>课程名称</th>
                    <th>所属学院</th>
                </tr>
            </thead>
            <tbody >
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>JavaScript</td>
                    <td>前端与移动开发学院</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>css</td>
                    <td>前端与移动开发学院</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>html</td>
                    <td>前端与移动开发学院</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>jQuery</td>
                    <td>前端与移动开发学院</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        //核心代码:
        $(function() {
            // 1.全选按钮All发生变化时,子复选框(td input)与全选按钮状态保持一致
            $('#All').change(function() {
                $('td input').prop('checked', $('#j_cbAll').prop('checked'))
            })

            // 2.被选中的子复选框数量<总数量则取消全选
            $('td input').change(function() {
                if ($('td input:checked').length < $('td input').length) {
                    $('#All').prop('checked', false)
                } else {
                    $('#All').prop('checked', true)
                }
            })
        })
    </script>

</body>

</html>

第二种:通过vue实现全选反选

效果图:

 实现代码:

<template>
  <div>
    <span>全选:</span>

    <!-- 第三步:给全选框绑定v-model。v-model的值取决于所有小复选框的值 -->
    <input type="checkbox" v-model="all">

    <!-- 第四步:点击反选按钮所有小复选框的状态取反 -->
    <button @click="fan">反选</button>
    <ul>

      <!-- 第一步:先通过v-for填充内容 -->
      <!-- :key的值有id用id,没有id用索引 -->
      <li v-for="(obj,index) in arr" :key="index">



        <!-- 第二步:给小复选框绑定v-model值 -->
        <input type="checkbox" v-model="obj.c">
        <span>{{obj.name}}</span>

      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  computed:{
    // 全选框v-mode的值取决于obj.c的值,所以要在computed计算属性中声明
    all: {

      set(val) {
        // 当对全选框进行了修改后,将所有小复选框的状态与全选框状态保持一致
        this.arr.forEach(obj=>obj.c=val)
      },


      // 遍历小复选框的c属性状态,全部为真则全选选中,有一个为false则全选取消,根据分析可以使用数组的every方法
    // 数组的every方法,会遍历所有数据,有一个为false就直接返回false
      get() {
        return this.arr.every(obj=>obj.c===true)
      }
    }
  },

  methods: {
    fan() {
      //点击反选按钮所有小复选框的状态取反
      this.arr.forEach(obj=>obj.c=!obj.c)
    }
  },
};
</script>

来源url
栏目