uniapp怎麼改變checkbox選取狀態

uniapp改變checkbox選取狀態的方法：先開啟對應的程式碼檔案；然後透過新增程式碼「if(e.detail.value.length>0){self.limitArea=1...}」來更改選中狀態即可。

本文操作環境：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: &#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 > 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選取狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！