微信小程序多项选择器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
? ? })?
? ??
? }
})

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

查看更多关于微信小程序多项选择器checkbox的详细内容...