微信小程序实现多选框功能的实例代码
时间：2021-07-23 07:37:40 | 栏目：JavaScript代码 | 点击：次
我们先来看看效果: 两种状态: 选中/不选中
wxml
<!-- 选择 S -->
<view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}" checked="{{item.selected}}" class="btn {{item.selected ? 'btn-selected' : ''}}" >
{{item.title}}
</view>
<!-- 选择 E -->
核心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;
}
总结