wxml
<view wx:for="{{checkList}}" wx:for-item="checkC" wx:for-index='checkI' wx:key='checkI' >
<checkbox bindtap="changeHandle" value="{{checkC.value}}" checked="{{checkC.checkBool}}" data-id="{{checkC.id}}" data-checked='{{checkC.checkBool}}'>
{{checkC.value}}
</checkbox>
</view>
自定义属性id,自定义属性checked,且设置点击事件
js
checkList:[
{value:'中国',checkBool:true,id:0},
{value:'美国',checkBool:true,id:1},
{value:'韩国',checkBool:false,id:2},
{value:'英国',checkBool:true,id:3},
{value:'德国',checkBool:false,id:4},
],
当对应的checked发生点击的时候,可以判断是哪一个输e.target.dataset.id)
checked的布尔值动态更新方法
1.出现的问题
当发生点击事件对的时候,e对象无法判断出checked的状态,且由于this.data.checkList中的checkBool中写好的数据没有发生改变,所以checked虽然点击发生变化,但是状态输出只能为固定 值
所以就需要每次点击的时候,把最新的checked的值通过this.setData()更新数据,渲染到页面,这样才能同步更新。
因为要data的数据是一个数组中的对象,所以就要考虑如何改变data数据中数组中的对象的某一个属性的值??????
解决方法
//更新checkbox中checked的布尔值
var checkvalue = !e.target.dataset.checked;
//获取id,知道哪一个点击
var checkid = e.target.dataset.id;
this.setData({
//获取目标的对应属性并赋值,更新到data中
['checkList['+checkid+'].checkBool'] :checkvalue
})
最后就能实现获取到目标的id和 当前的checked的值