我們先來看看效果: 兩種狀態: 選中/不選中

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: '眉筆質地',title: '眉筆質地'
  },{
   value: '最新',title: '最新'
  },{
   value: '正品',title: '正品'
  },{
   value: '包裝完整',title: '包裝完整'
  },{
   value: '是否防水',title: '是否防水'
  },{
   value: '其他',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;
}

總結

到此這篇關於微信小程式實現多選框功能的例項程式碼的文章就介紹到這了,更多相關微信小程式 多選框功能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！