js实现全选功能

今天给大家分享一个简单的js实现多选框全选功能

首先是html部分

<div id="app">
			<ul>
				<li>
					<input type="checkbox" v-model="ckall" @click="btnall">
					<span>全选</span>
				</li>
				<li v-for="(item,index) in arr" :key="index">
					<input type="checkbox" v-model="item.ckbox" @click="jia(index)">
					<span>{{item.title}}</span>
				</li>
			</ul>
		</div>

引入外部vue.js

接下来是js功能部分

let vm = new Vue({
			el: "#app",
			data: {
				ckall: false,  //全选按钮所绑定
				id: 0,
				arr: [{
						title: "唱歌",
						ckbox: false
					},
					{
						title: "跳舞",
						ckbox: false
					},
					{
						title: "吃饭",
						ckbox: false
					},
					{
						title: "睡觉",
						ckbox: false
					},
				]
			},
			methods: {
				btnall() {     //全选按钮
					for (var i = 0; i <= this.arr.length; i++) { //遍历所有选项
						if (this.ckall == false) {
							this.arr[i].ckbox = true;
							this.id = this.arr.length
						} else {
							this.arr[i].ckbox = false;
							this.id = 0
						}
					}
				},
				jia(index) {  
					if (this.arr[index].ckbox == false) {
						this.id++;
					} else {
						this.id--
					}
					if (this.id == this.arr.length) {
						this.ckall = true
					} else {
						this.ckall = false
					}
				}
			}
		})