微信小程序开发之checkbox以及js数据配置和事件处理

视频教程：http://v.youku.com/v_show/id_XMTczNzk2Mjk4MA==.html?from=s1.8-1-1.2&spm=0.0.0.0.UkDru7

checkbox

<checkbox-group>
<checkbox  value="key1" checked="true"/>value1
<checkbox  value="key2" checked="false"/>value2
<checkbox  value="key3" checked="true"/>value3
</checkbox-group>

事件分发和处理

上例中有3个checkbox，在实际项目中，你肯定会选择或者取消选择其中的checkbox，那么你如何获取你选择到的checkbox的数据呢？这就涉及到了事件的分发和处理。

微信小程序中，事件的分发系统已经帮我们做好了，我们只需要在checkbox-group配置bindchange="checkchange"，那么事件就会分发大对应的***.js中的checkchange()方法处理，如下：

***.wxml

<checkbox-group bindchange="<span style="font-family: Arial, Helvetica, sans-serif;">checkboxChange</span><span style="font-family: Arial, Helvetica, sans-serif;">"></span>
<checkbox  value="key1" checked="true"/>value1
<checkbox  value="key2" checked="false"/>value2
<checkbox  value="key3" checked="true"/>value3
</checkbox-group>

这里checkboxChange是自定义的名字，只要跟下面js的checkboxChange是一模一样就可以。

***.js

Page({
checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
},

})

如此，你每次选择，或者取消选择checkbox，都会触发checkboxChange方法，然后打印出来所有选择的数据(即e.detail.value)到控制台。

数据的配置

在上面的***.js的Page({})中，处理可以定义事件的处理方法，还可以配置数据。配置数据严格要求以data标签开头，如下

Page({
data: {
key1:"key1",
value1: 'value1',
key2:"key2",
value2:"value2"
},

checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
},

})
如果我们的数据在***.js中的data里面配置了，那么我们可以这么修改***.wxml中的checkbox标签里的数据：
<checkbox-group bindchange="checkboxChange">
<checkbox value="{{key1}}" checked="true"/>{{value1}}
<checkbox value="{{key2}}" checked="false"/>{{value2}}
<checkbox value="key3" checked="true"/>value3
</checkbox-group>用{{}}把data中对应的数据包起来，也可以得到一样的效果。

但是一般这种情况下，我们会考虑把数据设置为数组的形式，并在标签中循环加载出来。

data配置数组：

Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国'},
{name: 'BRA', value: '巴西'},
]
},

checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
},

})这里请注意，我把key和value稍微做了修改，对应的***.wxml也要修改。
<checkbox-group bindchange="checkboxChange">
<block class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}"/>{{item.value}}
</block>
</checkbox-group>这里我用了block来做循环，官方用的label标签，这都是辅助标签，不表示任何意义哈。

***.js的items对应了***.wxml的items。每一组元素以item.的形式取出。

视频教程：http://v.youku.com/v_show/id_XMTczNzk2Mjk4MA==.html?from=s1.8-1-1.2&spm=0.0.0.0.UkDru7

checkbox

<checkbox-group>
<checkbox  value="key1" checked="true"/>value1
<checkbox  value="key2" checked="false"/>value2
<checkbox  value="key3" checked="true"/>value3
</checkbox-group>

事件

上例中有3个checkbox，在实际项目中，你肯定会选择或者取消选择其中的checkbox，那么你如何获取你选择到的checkbox的数据呢？这就涉及到了事件的分发和处理。

微信小程序中，事件的分发系统已经帮我们做好了，我们只需要在checkbox-group配置bindchange="checkchange"，那么事件就会分发大对应的***.js中的checkchange()方法处理，如下：

***.wxml

<checkbox-group bindchange="<span style="font-family: Arial, Helvetica, sans-serif;">checkboxChange</span><span style="font-family: Arial, Helvetica, sans-serif;">"></span>
<checkbox  value="key1" checked="true"/>value1
<checkbox  value="key2" checked="false"/>value2
<checkbox  value="key3" checked="true"/>value3
</checkbox-group>

这里checkboxChange是自定义的名字，只要跟下面js的checkboxChange是一模一样就可以。

***.js

Page({
checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
},

})

如此，你每次选择，或者取消选择checkbox，都会触发checkboxChange方法，然后打印出来所有选择的数据(即e.detail.value)到控制台。