WordPress小程序开发之checkbox组件多选获取值

微信小程序的checkbox相比网页的checkbox有点不一样，获取多选的值会麻烦点，因为小程序没法通过js的选中事件直接获取反馈，只能通过绑定data来获取。

模板兔下面给一个示例代码，希望对你有所帮助。

wxss文件部分

.qualitys{background:#202020;padding:10px;overflow: hidden;margin-bottom: 20px;border-radius: 5px;}

.qualitys .k-item{width: 25%;float: left;font-size:14px;margin-bottom: 6px;}

.qualitys .k-item checkbox .wx-checkbox-input{width: 25rpx; height: 25rpx; border-radius: 3px;position: relative;top: -1.5px}

.qualitys .k-item checkbox .wx-checkbox-input.wx-checkbox-input-checked{width: 25rpx; height: 25rpx;background: #37C674;}

.qualitys .k-item checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{width: 25rpx;height: 25rpx;line-height: 25rpx;border-radius: 3px;text-align: center;font-size:24rpx; color:#FFF; background: transparent;}

wxml文件部分

<view class="qualitys">

        <block wx:for="{{tools.qualitys}}" wx:key="id" wx:for-item="quality" wx:for-index="idx">

          <label class="k-item" bindtap="bindSelect3" data-index="{{idx}}" data-key="{{quality.key}}">

            <checkbox value="{{quality.key}}" checked="{{quality.checked == 1}}" />{{quality.value}}

          </label>

        </block>

    </view>

js文件部分

bindSelect3: function(e){

    var that = this

    var selectKey = that.data.toolsDefault[3].key

    const items = that.data.tools.qualitys

    const index = e.currentTarget.dataset.index

    if(items[index].checked == 1){

      items[index].checked = 0

      selectKey = selectKey.replace(items[index].key,'');

    }else{

      items[index].checked = 1

      selectKey = selectKey + items[index].key

    }

    that.setData({

      'toolsDefault[3].key': selectKey

    })

    //console.log(that.data.toolsDefault)

  },

WordPress小程序开发之checkbox组件多选获取值

猜你喜欢

0 个评论