uniapp单选全选

<view>

            <view class="cssss" v-for="(item,index) in hondianCss" :key="index">

                <view class="hondian" :class="item.shows?'activity':''" @click="jkasdw(item,index)"></view>

                <view>{{item.title}}</view>

            </view>

            <view class="cssss">

                <view class="hondian" :class="allChek?'activity':''" @click="allJkasdw"></view>

                <view>全选</view>

            </view>

        </view>

 

data() {

        return {

            hondianCss:[

                {shows:false,title:'数据1'},

                {shows:false,title:'数据2'},

                {shows:false,title:'数据3'},

                {shows:false,title:'数据4'},

            ],

            allKLength:0,

            allKLasd:[],

            allChek:false,

        }

    },

methods: {

        jkasdw(item,index){

            item.shows = !item.shows

            this.allKLength = item.length

            if(item.shows==true){

                this.allKLasd.push(item)

                if(this.allKLasd.length==this.hondianCss.length){

                    this.allChek = true

                }else{

                    this.allChek = false

                }

            }else{

                this.allKLasd.splice(index,1)

                if(this.allKLasd.length !== this.hondianCss.length){

                    this.allChek = false

                }else{

                    this.allChek = true

                }

            }

           

        },

        allJkasdw(){

            let hondianCsss = this.hondianCss

            if(this.allKLength==this.hondianCss.length){

                hondianCsss.map((item,index)=>{

                    item.shows = false

                    this.allChek = false

                })

                this.allKLength = 0

            }else{

                hondianCsss.map((item,index)=>{

                    item.shows = true

                    this.allChek = true

                })

                this.allKLength = hondianCsss.length

            }

           

        },

    }

 

 

 

.cssss{display: flex;}

.hondian{

    border-radius: 50%; width: 40rpx; height: 40rpx;

    border: 1px red solid;

}

.activity{background: red;}