uniappでチェックボックスの選択状態を変更する方法

チェックボックスの選択状態を変更する Uniapp メソッド: まず、対応するコード ファイルを開き、コード「if(e.detail.value.length>0){self.limitArea=1...}」を追加します。選択したステータスを変更するだけです。

この記事の動作環境: Windows7 システム、uni-app2.5.1 バージョン、DELL G3 コンピューター。

uniapp-checkbox のチェック ステータスを動的に変更する方法を記録する

シナリオ: ユーザーがチェックされていない状態のチェック ボックスをクリックすると、確認とキャンセルが表示されます。 「OK」をクリックします。デフォルトではチェックが入っています。チェックを外した状態に戻す場合は、「キャンセル」をクリックしてください。

通常、これが行われます:

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

クリックしてチェックしますが、チェックを入れずに強制的にチェックされていない状態に戻す必要はありません。解決策: プロンプトがポップアップ表示され、[OK] をクリックし、[OK] で値を変更しますが、シナリオ 1 の問題に注意する必要があります。

推奨: 「uniapp チュートリアル 」

以上がuniappでチェックボックスの選択状態を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。