uniapp多选框CheckBox 数据接收 · 杂记

``` <template> <view> <view class="uni-padding-wrap"> <form @submit="formSubmit" @reset="formReset"> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-left"> 选择分类 </view> <view class="uni-list-cell-db"> <picker @change="bindPickerChange" :value="index" :range="arr"> <view class="uni-input">{{arr[index]}}</view> </picker> </view> </view> </view> <view class="uni-list"> <radio-group @change="radioChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"> <view> <radio :value="item.value" :checked="index === current" /> </view> <view>{{item.name}}</view> </label> </radio-group> </view> <view>  <view class="uni-list"> <checkbox-group class="block" @change="changeCheckbox"> <view class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxData" :key="item.id"> <checkbox :value="String(item.id)" :checked="checkedArr.includes(String(item.id))" :class="{'checked':checkedArr.includes(String(item.id))}"></checkbox> <text>{{item.name}}</text> </view> </checkbox-group> </view> <view> <checkbox-group @change="allChoose"> <label class="uni-list-cell uni-list-cell-pd"> <checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox> 全选 </label> </checkbox-group> </view> </view> <view> <view class="uni-title">昵称</view> <view class="uni-list"> <view class="uni-list-cell"><input class="uni-input" name="nickname" :value="nickname" placeholder="请填写您的昵称" /></view> </view> </view> <view> <view class="uni-title">出生日期</view> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-left">当前选择</view> <view class="uni-list-cell-db"> <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" name="date"> <view class="uni-input">{{ date == 0 ? '1990-01-01' : date }}</view> </picker> </view> </view> </view> </view> <view> <view class="uni-title">性别</view> <radio-group class="uni-flex" name="sex"> <label v-if="sex == 1"> <radio value="0" /> 男 </label> <label v-if="sex == 0"> <radio value="0" checked /> 男 </label> <label v-if="sex == 1"> <radio value="1" checked /> 女 </label> <label v-if="sex == 0"> <radio value="1" /> 女 </label> </radio-group> </view> <view class="uni-btn-v uni-common-mt"><button class="btn-submit" formType="submit" type="primary">提交</button></view> </form> </view> </view> </template> <script> var api = require('@/common/api.js'); export default { data() { return { arr: [], index: 0, items: [], current: 0 , nickname: '', sex: '', date: '', checkboxData:[], checkedArr:[], //复选框选中的值 allChecked:false ,//是否全选 rules:[], }; }, computed: { startDate() { return this.getDate('start'); }, endDate() { return this.getDate('end'); } }, onLoad(event) { api.get({ url: 'order/categories', data: { order: '+id', field: 'id,name' }, success: data => { console.log(data.data); for (let i in data.data) { this.arr.push(data.data[i].name) this.items.push(data.data[i]) this.checkboxData.push(data.data[i]) } //console.log(this.items); } }); api.get({ url: 'order/items/' + event.id, success: result => { //console.log(result); if (result.code == 1) { var res = result.data; this.index = res.categories[0].id - 1; this.current = res.categories[0].id - 1; //console.log(result.data); this.id = res.id; this.sex = res.sex; this.nickname = res.nickname; //this.richList = res.post_content; this.date = res.birthday; this.rules = res.rules; } this.checkedArr = this.rules; //this.checkedArr = e.detail.value; // 如果选择的数组中有值，并且长度等于列表的长度，就是全选 if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){ this.allChecked=true; }else{ this.allChecked=false; } } }); }, methods: { bindPickerChange: function(e) { this.index = e.target.value }, // 多选复选框改变事件 changeCheckbox(e){ //this.checkedArr = this.rules; this.checkedArr = e.detail.value; // 如果选择的数组中有值，并且长度等于列表的长度，就是全选 if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){ this.allChecked=true; }else{ this.allChecked=false; } console.log(this.checkedArr) this.rules=this.checkedArr.join(",") console.log(this.rules) }, // 全选事件 allChoose(e){ let chooseItem = e.detail.value; // 全选 if(chooseItem[0]=='all'){ this.allChecked=true; for(let item of this.checkboxData){ let itemVal=String(item.id); if(!this.checkedArr.includes(itemVal)){ this.checkedArr.push(itemVal); } } //console.log(this.checkedArr) }else{ // 取消全选 this.allChecked=false; this.checkedArr=[]; //console.log(this.checkedArr) } console.log(this.checkedArr) }, radioChange(evt) { for (let i = 0; i < this.items.length; i++) { if (this.items[i].value === evt.detail.value) { this.current = i; break; } } }, formSubmit: function(e) { var value = e.detail.value; if (value.nickname == '') { uni.showToast({ title: '昵称不能为空', duration: 1500, icon: 'none' }); return; } api.put({ url: 'order/items/' + this.id, data: { categories: this.index + 1, //categories: this.current + 1, rules:this.rules, nickname: value.nickname, birthday: this.date, sex: value.sex }, success: (data) => { //console.log(data) if (data.code == 1) { uni.showToast({ title: data.msg, icon: "success", duration: 1000 }) setTimeout((e => { uni.navigateBack(); }), 1000); } if (data.code == 0) { uni.showToast({ title: data.msg, icon: "none", duration: 1000 }) } } }); }, bindDateChange: function(e) { this.date = e.target.value; }, getDate(type) { var date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (type === 'start') { year = year - 60; } else if (type === 'end') { year = year + 2; } month = month > 9 ? month : '0' + month; day = day > 9 ? day : '0' + day; return `${year}-${month}-${day}`; } } }; </script> <style> page { background-color: #f1f1f1; } .face { text-align: center; padding-top: 60upx; } .face image { width: 150upx; height: 150upx; border-radius: 100%; } </style> ```