微信小程序学习（八）之checkbox组件

一、效果

二、代码

<!--学习checkbox组件-->
<view class="title">学习checkbox组件</view>
<view class="student">2016/12/13 vsiryxm@qq.com</view>
<view>
<text>
1、checkbox-group是一个多选项组。
2、value属性为checkbox的值，当选中状态发生变化时，会触发bindchange指向的事件。
3、disabled属性默认为false，也就是可用状态，如果需要禁用checkbox，将其设置为true。
4、checked属性设置checkbox是否被选中，与网页的功能一样。
5、不像网页那样，有name和id属性，个人暂时觉得不习惯不好用，待更多场景使用。
\n</text>
</view>
<view class="section">多项选择器组效果：</view>
<view>
<checkbox-group bindchange="chkChange">
<label class="checkbox" wx:for="{{items}}" wx:for-id="id" wx:for-item="item">
<checkbox name="yyy" value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
</label>
</checkbox-group>
</view>
<view class="section">单个效果：</view>
<view>
<checkbox-group bindchange="chkChange">
<checkbox value="1" bindchange="chkChange" /> 审核通过
</checkbox-group>
</view>

let app = getApp();
let xh = []; //外部数组示例
Page({
data:{
items:[
{name:'编程', value:'program'},
{name:'打球', value:'badminton'},
{name:'睡觉', value:'sleep'},
{name:'书法', value:'calligraphy', checked:'true'},
],
systemInfo:null,
myEnjoy:null,
},
onLoad:function(options) {
let that = this;
app.getSystemInfo(function(systemInfo){
that.setData({
systemInfo:systemInfo,
});
});
console.info(that.data.systemInfo);
},
chkChange:function(e) {
let that = this;
xh.push(e.detail.value);
console.info(xh);
that.setData({
myEnjoy: e.detail.value,
});
console.info('我的爱好有'+e.detail.value.length+'个：'+ that.data.myEnjoy.join('，'));
},

verify: function(e){
console.info(e.detail);
}
});