在我们使用uni-app框架开发的时候可能会有这么一场景就是通过业务代码动态来设置check-box的选中,可以按以下方式做。
- 首先编码实现checkBox选择变量和UI布局标签
...
<checkbox-group @change="checkBoxmA">
<checkbox value ='0' :checked="allCk" style="position: absolute; top: 0upx;left: 10upx;">
</checkbox>
</checkbox-group>
<button @tab='tapCheck()'> 取消选中</button>
..
2.实现js业务逻辑代码
A:设置checkBox初始化为未选中
data(){
return {allCk:false}
}
B.实现监听checkBoX值变化方法
checkBoxmA(e){
if(e.detail.value=='0'){
this.allCk = true
}else{
this.allCk = false
}
}
注意:当value=='0'时为选中,需要设置选中变量allCk的值。不然后面动态设置allCk时候checkBox的选中状态不会变。
C.实现代码设置CheckBox为未选中
tapCheck(){
this.allCk = false //设置false是未选中,设置true为选中
}
网友评论