一、打开微信小程序IDE开发工具，在pages目录下新建目录input，并在目录input下新建文件checkbox.wxml，本页面便是复选框页面
二、在项目根目录下的app.json中配置新建的文件checkbox，如下图
三、打开checkbox文件，添加如下代码
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="page__hd">
<view class="page__title">radio</view>
<view class="page__desc">weui单选按钮效果</view>
</view>
<view class="page__bd">
<view class="weui-cells__title">复选列表项</view>
<view class="weui-cells weui-cells_after-title">
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}" wx:key="value">
<checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
<view class="weui-cell__hd weui-check__hd_in-checkbox">
<icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
<icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>
<view class="weui-cell weui-cell_link">
<view class="weui-cell__bd">添加更多</view>
</view>
</view>
</view>
</view><!--V型知识库原创 www.vxzsk.com-->此时在微信小程序IDE工具中查看页面效果是一片空白，复选框的名字其实以及其它效果其实是在js中实现的，请继续往下看。
四、打开checkbox.js文件，在js中data对象中添加如下代码
/**
* 页面的初始数据
*/
data: {
checkboxItems: [
{ name: '复选框0', value: '0', checked: true },
{ name: '复选框1', value: '1' },
{ name: '复选框2', value: '2' }
],
},上述checkboxItems数组便是页面复选框的属性数据。
五、点击复选框的js代码
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value);
var checkboxItems = this.data.checkboxItems, values = e.detail.value;
for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
checkboxItems[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (checkboxItems[i].value == values[j]) {
checkboxItems[i].checked = true;
break;
}
}
}
this.setData({
checkboxItems: checkboxItems
});
}六、保存，点击小程序IDE工具编译按钮，预览效果如下
此文章本站原创，地址 https://www.vxzsk.com/1886.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：WeUI for 小程序radio单选按钮
下一篇：小程序weui日期时间控件实现
^