Cara Mengekalkan Nilai Kotak Semak dan Kotak Teks yang Konsisten dalam jQuery: Menangani Isu Pembatalan

Peristiwa Perubahan dan Klik Kotak Semak jQuery: Mengekalkan Konsisten dengan Nilai Kotak Teks

Dalam senario yang melibatkan kotak pilihan dan kotak teks yang sepadan, adalah penting untuk memastikan konsistensi dalam nilai mereka. Walau bagaimanapun, apabila menggunakan kedua-dua peristiwa .change() dan .click() pada kotak pilihan, ada kemungkinan untuk menghadapi isu di mana nilai kotak teks menjadi tidak konsisten dengan keadaan kotak pilihan selepas pembatalan.

Masalah timbul kerana .change () mengemas kini nilai kotak teks berdasarkan keadaan kotak semak, manakala .click() mengendalikan pengesahan pada nyahtanda. Jika pengguna membatalkan tindakan nyahtanda, .change() menyala sebelum pengesahan, menjadikan nilai kotak teks lapuk.

Mengatasi Ketidakkonsistenan

Untuk menyelesaikan isu ini, penyelesaian berikut boleh dilaksanakan:

Jawapan Kemas Kini:

Menggunakan this.checked bukannya $(this).is(':checked') dan menggerakkan logik pengesahan dalam acara .change() memastikan nilai kotak teks dikemas kini dengan betul hanya jika pengesahan berjaya.

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

Jawapan Asal:

Sebagai alternatif, gunakan $( this).attr("checked", returnVal) dan $(this).is(':checked') dalam acara .change() mencapai hasil yang sama, memastikan nilai kotak teks dikemas kini hanya jika pengesahan berjaya.

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

Penyelesaian ini berkesan menghalang nilai kotak teks daripada menjadi tidak konsisten dengan keadaan kotak pilihan selepas pembatalan, memastikan perwakilan yang tepat bagi pilihan pengguna.

Atas ialah kandungan terperinci Cara Mengekalkan Nilai Kotak Semak dan Kotak Teks yang Konsisten dalam jQuery: Menangani Isu Pembatalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!