wxml代码：
<view class="type_box">
<checkbox-group bindchange="applytypeChange">
<block wx:for="{{applytypeList}}" wx:key='value'>
<view class="checkbox">
<checkbox value="{{item.id}}" checked="{{item.checked}}"></checkbox>
<text value="{{item.id}}" data-id="{{item.id}}" data-name="{{item.name}}">{{item.name}}</text>
</view>
</block>
</checkbox-group>
</view>
wxss代码：
.type_box{
background: #f7f7f7;
width: 250rpx;
padding: 0 16rpx;
height: hidden;
line-height: 60rpx;
display: inline-block;
vertical-align: middle;
position: relative;
margin: auto;
}
.checkbox{
width: 240rpx;
display: inline-block;
vertical-align: text-top;
font-size: 31rpx;
position: relative;
margin-top: -13rpx;
}
js代码：
Page({
data: {
applytypeList:[
{name:'首次申领',id:'1'},
{name:'补发',id:'2'},
{name:'换发',id:'3'},
{name:'失效重新申领 ',id:'4'},
{name:'加注',id:'5'}
],
applicationtype:''
},
// 选择
checkChange(e) {
applytypeChange(e){
let selected = e.detail.value;
let applicationtype = this.data.applicationtype;
let applytypeList = this.data.applytypeList;
// for循环给每一项减0或者用map方法同样减0；如map方法：
selected = selected.map(function (item) {
return item - 0;
});
console.log("旧的applicationtype = " + applicationtype);
console.log('=======================');
// 清除申请类型中多余的值
for (let i = 0; i < selected.length; i++) {
// 判断前4个值是否被点击
if (!applicationtype.includes(selected[i]) && selected[i] != 5) {
for (let j = 0; j < selected.length; j++) {
if (selected[j] != selected[i] && selected[j] != 5) {
// 选中当前点击 去除之前点击
applytypeList[selected[j] - 1].checked = false;
applytypeList[selected[i] - 1].checked = true;
// 判断点击值中是否有第5个值
if (selected.includes(5)) {
applytypeList[4].checked = true;
} else {
applytypeList[4].checked = false;
}
this.setData({
applytypeList,
})
selected.splice(selected.indexOf(selected[j]), 1);
break;
}
}
}
}
this.setData({
applicationtype: selected,
})
console.log("新的applicationtype = " + this.data.applicationtype);
},
})
