原理:通过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
})
},
版权声明:本文为Wu_shuxuan原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。