index.wxml
<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>
index.js
Page({
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)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
index.wxss
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;
}
来源：https://blog.csdn.net/onion_line/article/details/80537996