微信小程序多项选择器checkbox

本文实例为大家分享了微信小程序多项选择器checkbox的具体代码，供大家参考，具体内容如下
第一的话就是我们的相关的布局文件：

1. <view class="container">
2. <view class="page-body">
3.   <view class="page-section page-section-gap">
4.    <view class="page-section-title">默认样式</view>
5.    <label class="checkbox">
6.     <checkbox value="cb" checked="true"/>选中
7.    </label>
8.    <label class="checkbox">
9.     <checkbox value="cb" />未选中
10.    </label>
11.   </view>
13.   <view class="page-section">
14.    <view class="page-section-title">推荐展示样式</view>
15.    <view class="weui-cells weui-cells_after-title">
16.     <checkbox-group bindchange="checkboxChange">
17.      <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
18.       <view class="weui-cell__hd">
19.        <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
20.       </view>
21.       <view class="weui-cell__bd">{{item.name}}</view>
22.      </label>
23.     </checkbox-group>
24.    </view>
25.   </view>
26. </view>
28. </view>

复制代码

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

1. Page({
3. // 在我们的这个位置的话填充我们的相关的数据
4. onShareAppMessage(){
5.   // 在我们的这个位置的话就是闯进我们相关的方法
6.   return{
7.    title: 'checkbox',
8.    path: 'pages/checkbox/checkbox'
9.   }
10. },
11. // 然后的话就是填充我们的相关的数据：
12. data:{
13. // 然后的话在我们的这个位置的话就是设置我们的相关的方法
14. items:[
15.   {value:'usa', name:'影响力'},
16.   { value: 'usa', name: '影响力' },
17.   { value: 'usa', name: '韭菜的自我修养' },
18.   { value: 'usa', name: '你的名字' },
19.   { value: 'usa', name: '怪诞行为学' ,checked: 'true'},
20.   { value: 'usa', name: '教父' },
21.   { value: 'usa', name: '经济学原理' },
22.   { value: 'usa', name: '三国演义' },
23.   { value: 'usa', name: '绝对成交' },
24.   { value: 'usa', name: '行为经济学讲义' },
25.   { value: 'usa', name: '黑天鹅' },
26.   { value: 'usa', name: '灰犀牛' },
27. ]
28. },
29. // 在我们的额这个位置的话就是设置我们的相关的方法
31. // 在我们的这个位置的话就是创建一个有参数的构造方法
32. checkboxChange(e){
33.   // 在我们的这位置的话就是在我们的控制台中输出我们需要的东西
34.   console.log('checkbox发生change事件，携带value值为：', e.detail.value)
35.   const items = this.data.items
36.   const values = e.detail.value
37.   // 然后的话在我们的这个位置使用我们的for循环来设置创建我们的相关的东西
38.   for (let i = 0, lenI = items.length; i < lenI; ++ i){
39.    // 然后的话就是循环遍历到后就获取到我们的东西
40.    items[i].checked = false
41.    for (let j = 0, lenJ = values.length; j < lenJ; ++j){
42.     if (items[i].value === values[j]){
43.      items[i].checked = true
44.      break
45.     }
46.    }
47.   }
48.   // 然后的话在我们的下面的这个位置的话就是设置我们的相关的方法
49.   this.setData({
50.    items
51.   })
53. }
54. })

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。