微信小程序多项选择器checkbox

本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下

第一的话就是我们的相关的布局文件:

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默认样式</view>
      <label class="checkbox">
        <checkbox value="cb" checked="true"/>选中
      </label>
      <label class="checkbox">
        <checkbox value="cb" />未选中
      </label>
    </view>
  
    <view class="page-section">
      <view class="page-section-title">推荐展示样式</view>
      <view class="weui-cells weui-cells_after-title">
        <checkbox-group bindchange="checkboxChange">
          <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
            <view class="weui-cell__hd">
              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
            </view>
            <view class="weui-cell__bd">{{item.name}}</view>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
  
</view>

然后的话就是我们的小程序的逻辑部分:

Page({

  // 在我们的这个位置的话填充我们的相关的数据
  onShareAppMessage(){
    // 在我们的这个位置的话就是闯进我们的相关的方法
    return{
      title: 'checkbox',
      path: 'pages/checkbox/checkbox'
    }
  },
// 然后的话就是填充我们的相关的数据:
data:{
   // 然后的话在我们的这个位置的话就是设置我们的相关的方法
  items:[
    {value:'usa', name:'影响力'},
    { value: 'usa', name: '影响力' },
    { value: 'usa', name: '韭菜的自我修养' },
    { value: 'usa', name: '你的名字' },
    { value: 'usa', name: '怪诞行为学' ,checked: 'true'},
    { value: 'usa', name: '教父' },
    { value: 'usa', name: '经济学原理' },
    { value: 'usa', name: '三国演义' },
    { value: 'usa', name: '绝对成交' },
    { value: 'usa', name: '行为经济学讲义' },
    { value: 'usa', name: '黑天鹅' },
    { value: 'usa', name: '灰犀牛' },
  ]
},
// 在我们的额这个位置的话就是设置我们的相关的方法

  // 在我们的这个位置的话就是创建一个有参数的构造方法
  checkboxChange(e){
    // 在我们的这位置的话就是在我们的控制台中输出我们需要的东西
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
    const items = this.data.items
    const values = e.detail.value
    // 然后的话在我们的这个位置使用我们的for循环来设置创建我们的相关的东西
    for (let i = 0, lenI = items.length; i < lenI; ++ i){
      // 然后的话就是循环遍历到后就获取到我们的东西
      items[i].checked = false
      for (let j = 0, lenJ = values.length; j < lenJ; ++j){
        if (items[i].value === values[j]){
          items[i].checked = true
          break
        }
      }
    }
    // 然后的话在我们的下面的这个位置的话就是设置我们的相关的方法
    this.setData({
      items
    }) 
    
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 微信小程序自定义多列选择器使用
  • 微信小程序自定义时间段picker选择器
  • 微信小程序日期选择器使用详解
  • 微信小程序自定义滚动选择器
  • 微信小程序实现多列选择器
  • 微信小程序日期时间选择器使用方法
  • 微信小程序实现自定义picker选择器弹窗内容
  • 微信小程序之picker日期和时间选择器
  • 微信小程序 省市区选择器实例详解(附源码下载)
  • 微信小程序实现课程选择器
张贴在2