signed

QiShunwang

“诚信为本、客户至上”

使用vue做checkbox单选框的一个全选和取消全选

2021/3/21 2:57:41   来源:

场景描述:

有多个单选框,想使用vue实现单选框的全选或者是取消全选

实现:

①前端代码

<!-- 全选框
	checked:判断是否选中,需要在vue中的data区进行定义
	getAllIds:全选或者取消的方法,需要在method区定义
-->
<input type="checkbox"
	v-model="checked"
	@change="getAllIds"/>
<!-- 单选框 可以存在多个或者单个
	:value="item.id":选中之后放入数组的值
	v-model="ids":跟ids这个数组进行双向绑定
-->	
<input type="checkbox" 
	v-for="item in testId"
	:value="item" 
	v-model="ids">
	

②js代码

//data区定义
ids: [],//选中的id
checked: false,//选中的状态
testId:[1,2,3],//测试的数组

//method区定义方法
getAllIds: function () {
	//点击全选框的时候,判断全选框的状态,以此来判断是全选还是取消全选
    if (this.checked) {//选中的话,就将数组所有的对象放进去ids里面
        testId.forEach(item=>{
			this.ids.push(item);
		});
    } else {
        this.ids = [];
    }
},

//watch监听区定义ids数组的一个监听规则
watch: {
    "ids": function () {
        if (this.ids.length == this.testId.length) {
            this.checked = true;
        } else {
            this.checked = false;
        }
    }
}