uni-app checkbox全选和取消全选

古城微笑少年丶 2023-02-24 14:26 3阅读 0赞

1.代码如下：

<template>
    	<view class="content">
    		<view class="top">
    			<checkbox-group @change="seletedStatus" checked>
    				<checkbox :value="item.value" v-for="(item,index) in items" :key="index" :checked="checkList.includes(String(item.value))">{
       {item.name}}</checkbox>
    			</checkbox-group>
    
    		</view>
    		<view class="bottom">
    			<checkbox :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				seletedAll: false,
    				items: [{
    						value: 'USA',
    						name: '美国'
    					},
    					{
    						value: 'CHN',
    						name: '中国',
    						checked: 'true'
    					},
    					{
    						value: 'BRA',
    						name: '巴西'
    					},
    					{
    						value: 'JPN',
    						name: '日本'
    					}
    				],
    				checkList: [], //选中值
    			};
    		},
    		methods: {
    			seletedStatus(e) {
    				this.checkList = e.detail.value
    				console.log(this.checkList)
    				if (this.checkList.length === this.items.length) {
    					this.seletedAll = true
    				}
    			},
    			_seletedAll(){
    				if(!this.seletedAll){
    					this.seletedAll=true
    					this.items.map(item=>{
    						this.checkList.push(item.value)
    					})
    					console.log(this.checkList)
    					console.log('true')
    				}else{
    					this.seletedAll=false
    					this.checkList=[]
    					console.log('false')
    				}
    			}
    		
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    	.content {
    		height: 600upx;
    		width: 100%;
    		background-color: #FFFFFF;
    	}
    </style>

2.效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/17d2a311b136477ea4bdf85e96595a1a.png