微信小程序多项选择器checkbox演示示例丨本际云推荐

微信小程序多项选择器checkbox演示示例

微信小程序中实现多项选择器checkbox

在微信小程序中，实现多项选择器checkbox是一个常见的需求。下面介绍如何实现。

微信小程序多项选择器checkbox演示示例

布局文件

首先，需要在相关的布局文件中添加表单元素checkbox，并通过label标签实现关联。以下是相关代码：

<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>

小程序逻辑部分

接下来，需要在小程序逻辑部分，通过checkbox的change事件，动态修改checkbox的checked值，实现多项选择。以下是相关代码：

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的过程就介绍完毕了，希望对大家有所帮助。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7174.html