uniapp에서 체크박스 선택 상태를 변경하는 방법

uniapp에서 체크박스 선택 상태를 변경하는 방법: 먼저 해당 코드 파일을 연 다음 "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;
}
}

시나리오 2:

확인하려면 클릭했지만 확인을 원하지 않고 강제로 확인되지 않은 상태로 돌아갑니다. LimitArea 값을 직접 변경하면 효과가 적용되지 않습니다. 해결 방법: 프롬프트가 표시되고 확인을 클릭한 다음 확인에서 값을 변경하지만 여전히 시나리오 1의 문제에 주의해야 합니다.

추천: "uniapp 튜토리얼"

위 내용은 uniapp에서 체크박스 선택 상태를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!