微信小程序开发之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)到控制台。