vue 实现全选反选

最新推荐文章于 2024-04-10 09:38:03 发布

成lin

最新推荐文章于 2024-04-10 09:38:03 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/weixin_43739954/article/details/107205317

版权

<body>
		<div id="app">
			<input type="checkbox" @click="chechAll" id="all" :checked="checkAll" />全选</p>
			<template v-for="s in isChecks">
				<input type="checkbox" name="one" :checked="s.isCheck" @click="checkOne(s.id)" />单选</p>
			</template>
		</div>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isChecks: [{
							isCheck: false,
							id: 0
						},
						{
							isCheck: false,
							id: 1
						}
					],
					checkAll: false,
					isCheckNum: 0
				},
				methods: {
					chechAll: function() {
						this.checkAll = !this.checkAll;
						this.checkAll == true ? this.isCheckNum = this.isChecks.length : this.isCheckNum = 0;
						for(var i = 0; i < this.isChecks.length; i++) {
							this.isChecks[i].isCheck = this.checkAll;
						}
					},
					checkOne: function(id) {
						this.isChecks[id].isCheck == true ? this.isCheckNum-- : this.isCheckNum++;
						this.isChecks[id].isCheck = !this.isChecks[id].isCheck;
						this.isChecks.length == this.isCheckNum ? this.checkAll = true : this.checkAll = false;
					}
				}
			})
		</script>
	</body>

成lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 实现全选反选

<body> <div id="app"> <input type="checkbox" @click="chechAll" id="all" :checked="checkAll" />全选</p> <template v-for="s in isChecks"> <input type="checkbox" name="one" :checked="s.isCheck" @click="checkOne(s.id)
复制链接

扫一扫

vue 实现 全选反选

vue 实现全选反选