首页> Uniapp教程
uniapp怎么改变checkbox选中状态
withpy
2021-05-17
简介uniapp改变checkbox选中状态的方法:首先打开相应的代码文件;然后通过添加代码“if(e.detail.value.length>0){self.limitArea=1...}”来更改选中状态即可。
uniapp改变checkbox选中状态的方法:首先打开相应的代码文件;然后通过添加代码“if(e.detail.value.length>0){self.limitArea=1...}”来更改选中状态即可。
记录一个 uniapp-checkbox 如何动态改变勾选状态
场景:未勾选状态下用户点击勾选框,弹出确认和取消,点击确定则默认勾选,点击取消,恢复成不勾选状态。
一般是这么做:
<checkbox-group @change="checkboxChange" name="limitarea" > <label> <checkbox value="1" :checked="limitArea"/> <text>限定地区</text> </label> </checkbox-group> <script> export default { data() { return { limitArea:0 } }, methods: { checkboxChange: function(e){ var self = this; if( e.detail.value.length > 0 ){ uni.showModal({ title: '限定地区', content: '限定地区,可能需要等待较长时间', confirmText: "确定", cancelText: "取消", success: function (res) { if (res.confirm) { self.limitArea = 1; }else{ self.limitArea = 0; } } }); }else{ this.limitArea = 0; } } }, components: {} } </script>
上面的:checked="limitArea" ,显示状态与limitArea 进行了绑定。但是发现虽然点击了取消, limitArea 值变成了0,按道理勾选框应该为不勾选,但是显示的勾选状态还是选中状态。什么原因我没弄明白,解决办法:
checkboxChange: function(e){ var self = this; if( e.detail.value.length > 0 ){//点击勾选 self.limitArea = 1; // *****加上这句代码******* uni.showModal({ title: '限定地区', content: '限定地区,可能需要等待较长时间', confirmText: "确定", cancelText: "取消", success: function (res) { if (res.confirm) { self.limitArea = 1; }else{ self.limitArea = 0; } } }); }else{ this.limitArea = 0; } }
场景二:
点击勾选,但我们不希望勾选,强制恢复成不勾选状态。直接改变limitArea值也是不生效的,解决方法:弹出提示,由用于点击确定,在确定里改变值就可以了,但还是要注意场景一的问题。
上一篇:java基本数据类型各占多少字节
相关文章
-
微信小程序实现简单购物车功能
这篇文章主要为大家详细介绍了微信小程序实现简单购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
-
在Python中通过threshold创建mask方式
今天小编就为大家分享一篇在Python中通过threshold创建mask方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
-
python 修改本地网络配置的方法
今天小编就为大家分享一篇python 修改本地网络配置的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
-
Vue-Cli 3.0 中配置高德地图的两种方式
这篇文章主要介绍了Vue-Cli 3.0 中配置高德地图的两种方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
-
小程序页面动态配置实现方法
这篇文章主要介绍了小程序页面动态配置实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
-
Node.js创建HTTP文件服务器的使用示例
我们的目的比较简单,使用Node.js创建一个HTTP协议的文件服务器,你可以使用浏览器或其它下载工具到文件服务器上下载文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下