微信小程序之多选checkbox选中之后改变样式

原理：通过checkChange来监听所有checkbox的变化，监听函数通过e.dtail.value得到一个被选中的数组，通过选中数组checkArr[]，来给原先的数据数组items[]的被选中对象的check属性置true，没有被选中的置false，在我们的wxml中，通过判断每个对象的checked属性来给他一个”is_checked”的class。

wxml

 <checkbox-group class='free-radios' bindchange="checkChange">
       <label bindtap="click"  wx:for="{{items}}" wx:key="{{items}}"  class="free-radio {{item.checked?'is_checked':''}}">
           <checkbox value="{{item.name}}" name="{{item.value}}"  checked="{{item.checked}}" hidden='true'></checkbox>
           <label class="free-text">{{item.value}}</label>
        </label>
</checkbox-group>

js

data: {
    showDialog: false,
    showDialogRight:false,
    items: [
      { name: '0', value: '中国', checked: false,},
      { name: '1', value: '美国', checked: false,},
      { name: '2', value: '巴西', checked: false,},
      { name: '3', value: '日本', checked: false,},
      { name: '4', value: '英国', checked: false,},
      { name: '5', value: '法国', checked: false,},
      { name: '6', value: '韩国', checked: false,},
      { name: '7', value: '俄罗斯', checked: false,},],
  },
checkChange: function (e) {
    console.log('radio发生change事件，携带value值为：', e)
    var that = this
    that.setData({
      value: e.detail.value
    })
    var items = this.data.items;
    var checkArr = e.detail.value;
    for (var i = 0; i < items.length; i++) {
      if (checkArr.indexOf(i + "") != -1) {
        items[i].checked = true;
      } else {
        items[i].checked = false;
      }
    }
    this.setData({
      items: items
    })  
  },

原文来自:http://blog.csdn.net/Wu_shuxuan/article/details/78491953?locationNum=3&fps=1