文章來源地址http://www.zghlxwxcb.cn/news/detail-715187.html

<scroll-view class="page-container" scroll-y="true" enable-back-to-top="{{true}}">
    //多選組
    <checkbox-group bindchange="checkboxChange">
      <view class="box" wx:for="{{records}}" wx:key="id">
        //使用label包裹多選框和自定義樣式
        <label class="box-checkbox {{item.checked? 'is-checked':''}}">
          //隱藏原生多選框
          <checkbox value="{{item.id}}" hidden="{{true}}" checked="{{item.checked}}"/>
          //自定義多選框
          <view class="box-checkbox_icon"></view>
        </label>
        <view class="box-item">
           //...記錄項內(nèi)容
        </view>
      </view>
    </checkbox-group>
    
  </scroll-view>
 <!-- 底部固定卡片 -->
  <view class="fixedCard">
    <view class="fixedCard-text">
      <view class="fixedCard-text_allcheck">
        <checkbox-group bindchange="handleAllCheck" >
          <label class="box-checkbox {{allcheck? 'is-checked':''}}">
            <checkbox value="{{allcheck}}" hidden="{{true}}" checked="{{allcheck}}" />
            <view class="box-checkbox_icon"></view>
          </label>
        </checkbox-group>
        <view>全選</view>
      </view>
      <view>
      共<text class="fixedCard-text_highlight">{{totalOrder}}</text>個訂單，<text class="fixedCard-text_highlight">{{totalMoney}}</text>元
      </view>
    </view>
    <view class="fixedCard-button" bind:tap="handleNextStep">下一步</view>
  </view>

//選擇訂單項
checkboxChange(e){
  const records = this.data.records   //獲得當前頁面全部記錄集合
  let _allcheck=false  //假設未全選
  const values = e.detail.value    //當前已選擇項的id集合，因為checkbox的value="{{item.id}}"
  const lenI = records.length
  const lenJ = values.length
  if(lenI==lenJ){    //全選，選中項集合長度和當前頁面記錄長度一致
    console.log("選擇全部")
    records.forEach(x=>{
      x.checked=true
    })
    _allcheck=true  //標記全選
  }else{    //非全選
    for (let i = 0; i < lenI; ++i) {
      records[i].checked = false
      for (let j = 0; j < lenJ; ++j) {
        if (records[i].id ==  values[j]) {
          records[i].checked = true
          break
        }
      }
    }
  }
  //計算選中項數(shù)值總計
  this.countTotal(records.filter(x=> x.checked==true))

  this.setData({   //更新數(shù)據(jù)重新渲染頁面
    allcheck:_allcheck,  
    records:records
  })
},
// 全選按鈕
handleAllCheck(e){
  const records = this.data.records
  if(records.length==0){
    wx.showToast({
      title: '無訂單',
      icon: 'none',
      duration: 1500
    })
    return
  }
  if(!this.data.allcheck){  //全選
    records.forEach(x=>{
      x.checked=true
    })
    this.countTotal(records)
  }else{  //取消全選，即全不選
    records.forEach(x=>{
      x.checked=false
    })
    this.countTotal([])
  }
  this.setData({
    allcheck:!this.data.allcheck,
    records:records
  })
},

//計算
countTotal(val){
  let money=0,order=0
  if(val.length!=0){
    orderorder=val.length
    val.forEach(x=>{
      money+=x.totalDeductionFee
    })
    //小數(shù)點第三位之后四舍五入
    money=Math.round(money * 100) / 100
  }
  this.setData({
    totalOrder:order,
    totalMoney:money
  })
},

//下一步
handleNextStep(){
  const orderIds=[]
  this.data.records.map(function(item){
    if(item.checked==true){orderIds.push(item.id)}
  })
  // console.log("已選訂單id集合",orderIds)
  if(orderIds.length > 0){
    wx.navigateTo({
      url:`/pages/submitApply?orderIds=${orderIds}`
    })
  }else{
    wx.showToast({
      title: '請選擇訂單',
      icon: 'none',
      duration: 1500
    })
  }
},

box-checkbox{
  display: block;
  width: 38rpx;
  height: 38rpx;
  margin-right: 25rpx;
  border-radius: 50%;
  border: 2rpx solid #dadbda;
  background-color: #fff;
  position: relative;
  &_icon::after{//小勾
    box-sizing: content-box;
    content: "";
    border: 4rpx solid rgb(0, 0, 0);
    border-radius: 10rpx;
    border-left: 0;
    border-top: 0;
    height: 20rpx;
    width: 10rpx;
    left: calc(50% - 7rpx);
    top: calc(50% - 14rpx);
    position: absolute;
    transform: rotate(45deg) scaleY(0);
    transition: transform .05s ease-in .05s;
    transform-origin: center;
  }

  &.is-checked {  //選中樣式
    background-color: #ffd900;
    .box-checkbox_icon::after {
      transform: rotate(45deg) scaleY(1);
    }
  }
}

到了這里，關于微信小程序：自定義多選框樣式，實現(xiàn)多選、全選功能，以及使用css實現(xiàn)選中打鉤效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！