微信小程序中全选反选

it2025-07-31  8

<view class="myCheck"> <checkbox-group bindchange="checkboxChange"> <view wx:for="{{list}}" > <!-- value="{{item.value}}" ---选中的时候会打印这个值 --> <checkbox value="{{item.value}}" checked="{{item.checked}}" class="check"/> <text class="weui-cell__bd">{{item.name}}</text> </view> </checkbox-group> <checkbox class="all" bindtap="allChecked" checked="{{isAllChecked}}">全选</checkbox> </view> // 单选---->全选 checkboxChange(e){ // console.log(e.detail.value) var checkedList=e.detail.value // checkedList中是否有List中对应的数据 this.data.list.forEach(el=>{ if(checkedList.includes(el.value)){ el.checked=true }else{ el.checked=false } }) // 同时改变list中的checked状态 this.setData({ list:this.data.list }) if(checkedList.length==this.data.list.length){ this.setData({ isAllChecked:true }) }else{ this.setData({ isAllChecked:false }) } console.log(this.data.list) }, // 全选---单选 allChecked(){ // 列表中是否都选中 var bol= this.data.list.every(el=>el.checked==true) if(bol){ this.data.list.forEach(el=>el.checked=false) this.setData({ list:this.data.list }) }else{ this.data.list.forEach(el=>el.checked=true) this.setData({ list:this.data.list }) } }

list数据

list: [ {value: 'CHN', name: '中国', checked:false}, {value: 'BRA', name: '巴西',checked:false}, {value: 'FRA', name: '法国',checked:false} ], //全选 isAllChecked:false
最新回复(0)