我们先来看看效果: 两种状态: 选中/不选中
wxml
{{item.title}}
核心js
Page({
data: {
riderCommentList: [{
value: '商品品质',
selected: false,
title: '商品品质'
}, {
value: '眉笔质地',
selected: false,
title: '眉笔质地'
}, {
value: '最新',
selected: false,
title: '最新'
}, {
value: '正品',
selected: false,
title: '正品'
}, {
value: '包装完整',
selected: false,
title: '包装完整'
}, {
value: '是否防水',
selected: false,
title: '是否防水'
}, {
value: '其他',
selected: false,
title: '其他'
}]
},
checkboxChange(e) {
console.log('checkboxChange e:', 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('所有选中的值为：', detailValue)
},
onLoad: function (options) {
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})
wxss
.btn{
font-size: 24rpx;
padding: 12rpx 19rpx;
border: 1px solid #dcdcdc;
background: #F8F8F8;
border-radius: 10rpx;
margin-right: 30rpx;
margin-bottom: 22rpx;
text-align: center;
display: inline-block;
color: #666666;
}
.btn:nth-child(5) {
margin-right: 0;
}
.btn-selected{
border: 1px solid #FF7C80;
color: #F73C41;
background: #FFFFFF;
}
总结
到此这篇关于微信小程序实现多选框功能的实例代码的文章就介绍到这了,更多相关微信小程序 多选框功能内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！
