本文操作环境：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: '限定地区',
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值也是不生效的，解决方法：弹出提示，由用于点击确定，在确定里改变值就可以了，但还是要注意场景一的问题。
推荐：《uniapp教程》
以上就是uniapp怎么改变checkbox选中状态的详细内容，更多请关注悠悠之家其它相关文章！
发表评论 取消回复