043 ∞ 表单组件：checkbox
http://xxx.fishc.com/forum/201805/02/171248f4zdsipf6d4qjnjl.png上一讲我们搞定了button，本次来学习checkbox。
checkbox，多选框，属性：
属性名 类型 默认值 说明
value String <checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中，可用来设置默认选中
color Color checkbox的颜色，同css的color
checkbox-group，多项选择器，内部由多个checkbox组成，属性：
属性名 类型 默认值 说明
bindchange EventHandle <checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
index.wxml：
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
index.js：
Page({
data: {
items: [
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
{ name: 'TUR', value: '法国' },
]
},
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
}
})
控制台依次输出：
课后作业
1、补充代码：
<？ bindchange="checkboxChange">
<？ value="{{item.name}}" checked="true"/>FishC
</checkbox-group>
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢小程序，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
页:
[1]