小程序：选中与未选中的样式

未选中是白色背景 选中是蓝色背景

<view>
<checkbox-group name="checkbox" class="check">
<label bindtap='clicks' wx:for="{{checks}}" wx:key="{{checks}}" wx:for-index="index" data-index="{{index}}" class='{{item.checked?"is_checked":""}}'>
<checkbox value="{{item.name}}" data-val="{{item.name}}" hidden='false' checked='{{item.checked}}' /> {{item.name}}
</label>
</checkbox-group>
<input style='display:none' maxlength="20" name="roomlabel" placeholder='请输入职位名称' value=" {{checks[name]}}" />
</view> 
label{
border:2rpx solid #aaaaaa;
}
.check {
display:flex;
flex-wrap:wrap;
justify-content:space-around;

}
.check label {
width: 120rpx;
height: 60rpx;
border-radius: 8rpx;
/* background-color: #fff; */
display: flex;
align-items: center;
margin: 0 5rpx;
justify-content: center;
/* color: #aaa; */
margin-top: 20rpx;
}
.is_checked {
background-color: #14a1fd;
opacity: 0.4;
color: #fff;
border: 2rpx solid #fff;
}
.is_checked>checkbox {
color: red;
}
data: {
checks: [
{ name: "投影仪", value: '0', checked: false },
{ name: "电视机", value: '1', checked: false },
{ name: "空调", value: '2', checked: false },
{ name: "Wifi", value: '3', checked: false },
{ name: "电脑", value: '4', checked: false },
{ name: "舞把杆", value: '5', checked: false },
{ name: "镜面墙", value: '6', checked: false },
{ name: "音响", value: '7', checked: false },
{ name: "桌椅", value: '8', checked: false },
{ name: "其他", value: '9', checked: false }
]
},
clicks: function (e) {
let index = e.currentTarget.dataset.index;
let arrs = this.data.checks;
if (arrs[index].checked == false) {
arrs[index].checked = true;
} else {
arrs[index].checked = false;
}
this.setData({
checks: arrs
})
// console.log(e)
}

 

 

原文链接：https://blog.csdn.net/onion_line/java/article/details/80537996