How to change the checkbox selected state in uniapp

Uniapp method to change the checkbox selected state: first open the corresponding code file; then add the code "if(e.detail.value.length>0){self.limitArea=1...}" Just change the selected status.

The operating environment of this article: windows7 system, uni-app2.5.1 version, DELL G3 computer.

Record how to dynamically change the check status of a uniapp-checkbox

Scenario: When the user clicks the check box in the unchecked state, confirmation and cancellation will pop up. Click OK. It is checked by default. Click Cancel to return it to the unchecked state.

Generally this is done:

<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>

Above: checked="limitArea", the display status is bound to limitArea. However, I found that although I clicked Cancel, the limitArea value changed to 0. Logically speaking, the check box should be unchecked, but the displayed checked status is still checked. I don’t understand the reason. Solution:

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;
}
}

Scenario 2:

Click to check, but we don’t want to check it and force it to return to the unchecked state. Directly changing the limitArea value will not take effect. The solution: a prompt will pop up, click OK, and then change the value in OK, but you still need to pay attention to the problem of scenario one.

Recommended: "uniapp tutorial"

The above is the detailed content of How to change the checkbox selected state in uniapp. For more information, please follow other related articles on the PHP Chinese website!