uview 复选框实现全选反选功能

765 阅读1分钟
<view>
	<u-checkbox-group v-model="checkboxValue1" placement="column"  >
		<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in         
                 checkboxList1" :key="index"
					:label="item.name" :name="item.name" :disabled='item.disabled' 
                 :checked="item.checked" @change="choose(item)">
		</u-checkbox>
	</u-checkbox-group>
</view>
 
<view class="">
			<u-checkbox-group>
				<u-checkbox label='全选' :checked="isAllChecked" @change="allChoose">
 
				</u-checkbox>
			</u-checkbox-group>
 
</view>
data() {
			return {
 
				checkboxList1: [{
						name: '苹果',
						disabled: false,
						checked: false
 
					},
					{
						name: '香蕉',
						disabled: false,
						checked: false
 
					},
					{
						name: '橙子',
						disabled: false,
						checked: false
 
					}
				],
				isAllChecked: false
			}

methods: {
 
            // 反选
			choose(item) {
                   
                //先进行取反,改变当前数据的checked状态
				item.checked = !item.checked;
				// 是否全部选中
				let allSelected = this.checkboxList1.every(item => item.checked === true);
				if (allSelected)
					this.isAllChecked = true;
				else
					this.isAllChecked = false;
 
			},
 
            //  全选
			allChoose() {
				this.isAllChecked = !this.isAllChecked;
				this.checkboxList1.map(item => item.checked = this.isAllChecked);
			},
 
		}