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

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

wxml

{{item.value}}

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

})

},