微信小程序学习（八）之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);
    }
});