data
riderCommentList: [{
value: '安全',
selected: false,
title: '安全',
field: 'topic6'
}, {
value: '颜值',
selected: false,
title: '颜值',
field: 'topic3'
}, {
value: '功能',
selected: false,
title: '功能',
field: 'topic7'
},{
value: '没有',
selected: false,
title: '没有',
field: 'topic5'
}],
wxml
{{item.value}}
js
checkboxChange: function (e) {
let string = "riderCommentList[" + e.target.dataset.index + "].selected"
this.setData({
[string]: !this.data.riderCommentList[e.target.dataset.index].selected
})
let detailValue = this.data.riderCommentList.filter(it => it.selected).map(it => it.value)
console.log(this.data.riderCommentList)
},
复选框样式修改
/*复选框外框样式*/
checkbox .wx-checkbox-input {
width: 40rpx;
height: 40rpx;
border: 4rpx solid #999;
border-radius: 100%;
}
/*复选框外框选中样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border-color: #3cbcee;
}
/*复选框选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 60%;
height: 60%;
background: #3cbcee;
border-radius: 100%;
content: '';
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
单选样式修改
/* 单选按钮样式*/
radio .wx-radio-input {
width: 40rpx;
height: 40rpx;
border: 4rpx solid #999;
border-radius: 100%;
background: none;
}
/*单选按钮选中后内部样式*/
radio .wx-radio-input.wx-radio-input-checked {
border: 4rpx solid #3cbcee!important;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 60%;
height: 60%;
background: #3cbcee;
border-radius: 100%;
content: '';
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
文章链接