# 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> ```