uni-app 开发APP动态设置check-box的选中

2020-08-12  本文已影响0人  朝云幕雪

在我们使用uni-app框架开发的时候可能会有这么一场景就是通过业务代码动态来设置check-box的选中,可以按以下方式做。

  1. 首先编码实现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为选中
    }
上一篇 下一篇

猜你喜欢

热点阅读