首页 > web前端 > uni-app > 正文

uniapp怎么改变checkbox选中状态

藏色散人
发布: 2023-01-13 00:44:38
原创
10995 人浏览过

uniapp改变checkbox选中状态的方法:首先打开相应的代码文件;然后通过添加代码“if(e.detail.value.length>0){self.limitArea=1...}”来更改选中状态即可。

uniapp怎么改变checkbox选中状态

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

记录一个 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: &#39;限定地区&#39;,
content: &#39;限定地区,可能需要等待较长时间&#39;,
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: &#39;限定地区&#39;,
content: &#39;限定地区,可能需要等待较长时间&#39;,
confirmText: "确定",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
self.limitArea = 1;
}else{
self.limitArea = 0;
}
}
});
}else{
this.limitArea = 0;
}
}
登录后复制

场景二:

点击勾选,但我们不希望勾选,强制恢复成不勾选状态。直接改变limitArea值也是不生效的,解决方法:弹出提示,由用于点击确定,在确定里改变值就可以了,但还是要注意场景一的问题。

推荐:《uniapp教程

以上是uniapp怎么改变checkbox选中状态的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板