uniapp怎么改变checkbox选中状态

百变鹏仔 4周前 (11-20) #uniapp

文章标签状态

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

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

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

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

一般是这么做：

<checkbox-group><label><checkbox></checkbox><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 &gt; 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怎么改变checkbox选中状态

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项