微信小程序实现多选框功能的实例代码

我们先来看看效果: 两种状态: 选中/不选中

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;
}

总结

到此这篇关于微信小程序实现多选框功能的实例代码的文章就介绍到这了,更多相关微信小程序 多选框功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！