# uni-app中全选多选单选 ``` <template> <view> <!-- 单个复选框 --> <checkbox-group class="block" @change="checkboxChange"> <view class="cu-form-group"> <view class="title">复选选操作(checkbox)</view> <checkbox :class="isChecked?'checked':''" :checked="isChecked?true:false" value="1"></checkbox> </view> </checkbox-group> <!-- 多个复选框，带全选 --> <view> <checkbox-group class="block" @change="changeCheckbox"> <view v-for="item in checkboxData" :key="item.value"> <checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))" :class="{'checked':checkedArr.includes(String(item.value))}"></checkbox> <text>{{item.label}}</text> </view> </checkbox-group> </view> <view> <checkbox-group @change="allChoose"> <label> <checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox> 全选 </label> </checkbox-group> </view> </view> </template> <script> export default { data() { return { isChecked:false, checkboxData:[ {'value':0,'label':'选项一'}, {'value':1,'label':'选项二'}, {'value':2,'label':'选项三'}, {'value':3,'label':'选项四'}, {'value':4,'label':'选项五'}, {'value':5,'label':'选项六'}, {'value':6,'label':'选项七'}, {'value':7,'label':'选项八'}, {'value':8,'label':'选项九'}, {'value':9,'label':'选项十'} ], checkedArr:[], //复选框选中的值 allChecked:false //是否全选 } }, methods: { // 单个复选框事件 checkboxChange(e) { let values = e.detail.value; if(values[0]==1){ this.isChecked=true; }else{ this.isChecked=false; } }, // 多选复选框改变事件 changeCheckbox(e){ this.checkedArr = e.detail.value; // 如果选择的数组中有值，并且长度等于列表的长度，就是全选 if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){ this.allChecked=true; }else{ this.allChecked=false; } }, // 全选事件 allChoose(e){ let chooseItem = e.detail.value; // 全选 if(chooseItem[0]=='all'){ this.allChecked=true; for(let item of this.checkboxData){ let itemVal=String(item.value); if(!this.checkedArr.includes(itemVal)){ this.checkedArr.push(itemVal); } } }else{ // 取消全选 this.allChecked=false; this.checkedArr=[]; } } } } </script> ```