Comment changer l'état sélectionné de la case à cocher dans Uniapp

Comment uniapp modifie l'état sélectionné de la case à cocher : ouvrez d'abord le fichier de code correspondant puis ajoutez le code "if(e.detail.value.length>0){self.limitArea=1...}" Juste modifier le statut sélectionné.

L'environnement d'exploitation de cet article : système Windows7, version uni-app2.5.1, ordinateur DELL G3.

Enregistrez une case à cocher uniapp et comment modifier dynamiquement l'état de la vérification

Scénario : lorsque l'utilisateur clique sur la case à cocher dans l'état non coché, une confirmation et une annulation apparaîtront Cliquez sur OK. Il est coché par défaut. Cliquez sur Annuler pour revenir à l'état non coché.

Faites habituellement ceci :

<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" ci-dessus, l'état d'affichage est lié à limitArea. Cependant, j'ai constaté que même si j'avais cliqué sur Annuler, la valeur limitArea était passée à 0. Logiquement parlant, la case à cocher devrait être décochée, mais l'état coché affiché est toujours coché. Je ne comprends pas la raison. 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;
}
}

Scénario 2 :

Cliquez pour vérifier, mais nous ne voulons pas le vérifier et le forcer à revenir à l'état non coché. La modification directe de la valeur limitArea ne prendra pas effet. La solution : une invite apparaîtra, cliquez sur OK, puis modifiez la valeur dans OK, mais vous devez toujours faire attention au problème du premier scénario.

Recommandé : "Tutoriel Uniapp"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!