我是靠谱客的博主 眯眯眼发夹,这篇文章主要介绍uniapp怎么改变checkbox选中状态,现在分享给大家,希望可以做个参考。

本文操作环境:windows7系统、uni-app2.5.1版本,DELL G3电脑。

记录一个 uniapp-checkbox 如何动态改变勾选状态

场景:未勾选状态下用户点击勾选框,弹出确认和取消,点击确定则默认勾选,点击取消,恢复成不勾选状态。

一般是这么做:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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,按道理勾选框应该为不勾选,但是显示的勾选状态还是选中状态。什么原因我没弄明白,解决办法:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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值也是不生效的,解决方法:弹出提示,由用于点击确定,在确定里改变值就可以了,但还是要注意场景一的问题。

推荐:《uniapp教程》

以上就是uniapp怎么改变checkbox选中状态的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是眯眯眼发夹最近收集整理的关于uniapp怎么改变checkbox选中状态的全部内容,更多相关uniapp怎么改变checkbox选中状态内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(388)

评论列表共有 0 条评论

立即
投稿
返回
顶部