脚本宝典收集整理的这篇文章主要介绍了通过vue或jQuery实现checkbox全选反选的方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
全选反选多数适用于购物车中,下面介绍两种实现类似购物车的checkbox全选反选的方法
效果图:
实现代码:
<!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>
效果图:
实现代码:
<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>
以上是脚本宝典为你收集整理的通过vue或jQuery实现checkbox全选反选的方法全部内容,希望文章能够帮你解决通过vue或jQuery实现checkbox全选反选的方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。