javascript 使用vue实现全选和取消全选

Excel_VBA表格จุ๊บ2023-09-18 11:47

html部分

javascript 复制代码

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
	<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()" />
	<label for="checkbx">
		{{checked}}
	</label>
	<br />
	<input type="checkbox" id="val1" value="选项1" v-model="checkedname" />
	<label for="val1">选项1</label>
	<br />
	<input type="checkbox" id="val2" value="选项2" v-model="checkedname" />
	<label for="val2">选项2</label>
	<br />
	<input type="checkbox" id="val3" value="选项3" v-model="checkedname" />
	<label for="val3">选项3</label>
	<br />
	<span>选择的值为:{{checkedname}}</span>
</div>

js部分

javascript 复制代码

var vm = new Vue({
	el: '#app',  //挂载位置
	data: {
		checked: false,
		checkedname: [],
		checkedArr: ["选项1", "选项2", "选项3"]
	},
	methods: {
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedname = this.checkedArr
			} else {
				this.checkedname = []
			}
		}
	}
})

有兴趣的赶紧去试试吧，希望能帮助到您！