jQuery で一貫したチェックボックスとテキストボックスの値を維持する方法: キャンセルの問題に対処する

jQuery チェックボックスの変更とクリック イベント: TextBox 値との一貫性の維持

チェックボックスと対応するテキストボックスが関係するシナリオでは、一貫性を確保することが重要です。彼らの価値観。ただし、チェックボックスで .change() と .click() イベントの両方を使用すると、テキストボックスの値がキャンセル時のチェックボックスの状態と一致しないという問題が発生する可能性があります。

この問題は、.change が原因で発生します。 () はチェックボックスの状態に基づいてテキストボックスの値を更新し、.click() はチェックを外すと確認を処理します。ユーザーがチェック解除アクションをキャンセルすると、確認の前に .change() が実行され、テキストボックスの値が古いままになります。

不一致への対処

この問題を解決するには、次の解決策を実装できます:

更新された回答:

$(this).is(':checked') の代わりに this.checked を使用し、確認ロジックを移動します。 .change() イベント内で、確認が成功した場合にのみテキストボックスの値が正しく更新されるようにします。

<code class="javascript">$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});</code>

元の回答:

または、 $( .change() イベント内の this).attr("checked", returnVal) と $(this).is(':checked') は同じ結果を達成し、確認が成功した場合にのみテキスト ボックスの値が更新されるようにします。

<code class="javascript">$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});</code>

これらのソリューションは、キャンセル時にテキストボックスの値がチェックボックスの状態と不一致になるのを効果的に防ぎ、ユーザーの選択を正確に表現します。

以上がjQuery で一貫したチェックボックスとテキストボックスの値を維持する方法: キャンセルの問題に対処するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。