微信小程序 —— 多选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    })    console.log(this.data.value)    var items = this.data.items;    console.log(this.data.items)    var checkArr = e.detail.value;    console.log(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    })    },