使用Vue实现复选框的全选与反全选

最新推荐文章于 2024-05-13 15:57:04 发布

二木成林

最新推荐文章于 2024-05-13 15:57:04 发布

阅读量2.7k

点赞数 1

分类专栏： # Vue 文章标签： Vue

本文链接：https://blog.csdn.net/cnds123321/article/details/104030710

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

该实例实现复选框的全选与反全选。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<table>
				<tr>
					<th>
						<!-- 这是全选复选框（即选中了这个复选框，所有选项复选框都被选中），其绑定数据的v-model为checkedAll，并绑定了改变事件changeAllChecked -->
						<input type="checkbox" v-model="checkedAll" v-on:change="changeAllChecked()">
					</th>
					<th>序号</th>
				</tr>
				<tr>
					<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
					<td><input type="checkbox" value="1" v-model="checkedItem" /></td>
					<td>1</td>
				</tr>
				<tr>
					<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
					<td><input type="checkbox" value="2" v-model="checkedItem" /></td>
					<td>2</td>
				</tr>
				<tr>
					<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
					<td><input type="checkbox" value="3" v-model="checkedItem" /></td>
					<td>3</td>
				</tr>
				<tr>
					<!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
					<td><input type="checkbox" value="4" v-model="checkedItem" /></td>
					<td>4</td>
				</tr>
			</table>
			<!-- 打印选中的选项复选框的value属性的值 -->
			<p>选中的值为：{{checkedItem}}</p>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					// 设置全选复选框初始状态为false,即未选中
					checkedAll: false,
					// 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空
					checkedItem: [],
					// 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框
					checkedAttr: ["1", "2", "3", "4"]
				},
				methods: {
					// 全选复选框状态改变监听事件
					changeAllChecked: function() {
						// 判断全选复选框是否选中
						if (this.checkedAll) {
							// 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框
							this.checkedItem = this.checkedAttr;
						} else {
							// 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框
							this.checkedItem = [];
						}
					}
				},
				watch: {
					// 监听复选框项是否全部选中
					checkedItem: function() {
						// 判断选中选项复选框的值数组的长度是否与设定的长度相等，如果相等则所有的选项复选框被选中，否则没有被选中。
						if (this.checkedItem.length == this.checkedAttr.length) {
							// 如果所有复选框项全部被选中,则全选复选框也被勾选
							this.checkedAll = true;
						} else {
							// 否则复选框不勾选
							this.checkedAll = false;
						}
					}
				}
			});
		</script>
	</body>
</html>

浏览器显示：

二木成林

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
使用Vue实现复选框的全选与反全选

该实例实现复选框的全选与反全选。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue</title>  <script type="text/java...
复制链接

扫一扫