记录一个 uniapp-checkbox 如何动态改变勾选状态_uniapp checkbox 动态改变选中状态-优快云博客

本文探讨了在使用Checkbox组件时遇到的状态同步问题，详细解释了为何即使将勾选框值设为0，其视觉状态仍保持勾选的原因，并提供了解决方案。同时，文章还讨论了如何在用户选择取消时正确恢复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值也是不生效的，解决方法：弹出提示，由用于点击确定，在确定里改变值就可以了，但还是要注意场景一的问题。