全选反选多数适用于购物车中，下面介绍两种实现类似购物车的checkbox全选反选的方法
第一种：通过jQuery实现全选反选
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head lang="en">
<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 class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="All" />
</th>
<th>课程名称</th>
<th>所属学院</th>
</tr>
</thead>
<tbody id="j_tb">
<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>