微信小程序：自定义多选框样式，实现多选、全选功能，以及使用css实现选中打钩效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序：自定义多选框样式，实现多选、全选功能，以及使用css实现选中打钩效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序选择框,微信小程序,前端,javascript,小程序,css3 文章来源地址https://www.toymoban.com/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">
           //...记录项内容
        </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
        }
      }
    }
  }
  //计算选中项数值总计
  this.countTotal(records.filter(x=> x.checked==true))

  this.setData({   //更新数据重新渲染页面
    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
    })
    //小数点第三位之后四舍五入
    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);
    }
  }
}

到了这里，关于微信小程序：自定义多选框样式，实现多选、全选功能，以及使用css实现选中打钩效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！