Pengendali OnChange yang dipertingkatkan untuk Butang Radio

Dalam artikel ini, kami meneroka cabaran mengendalikan acara onchange untuk kumpulan butang radio dengan berkesan. Secara lalai, acara onchange JavaScript untuk butang radio menyala hanya apabila butang ditanda, bukan apabila ia dinyahtanda.

Memahami Masalah

Pertimbangkan senario dengan berbilang radio butang dengan nama yang sama dalam borang. Apabila borang diserahkan, hanya satu butang radio dijangka dipilih dan nilainya dihantar bersama data borang. Walau bagaimanapun, acara onchange tidak menyediakan mekanisme untuk menangkap peralihan daripada satu butang yang dipilih ke yang lain.

Tingkah laku ini boleh menimbulkan masalah dalam situasi di mana anda perlu menjejaki kedua-dua butang yang baru disemak dan yang telah disemak sebelumnya . Sebagai contoh, dalam bentuk dinamik, anda mungkin mahu melakukan tindakan tertentu atau mengemas kini UI berdasarkan perubahan dalam pemilihan butang radio.

Penyelesaian Menggunakan Pendengar Acara

Satu penyelesaian adalah untuk menggunakan pendengar acara yang dilampirkan pada setiap acara perubahan butang radio. Dengan mendengar peristiwa perubahan setiap butang secara individu, kami boleh menjejaki butang yang telah ditandakan sebelum ini.

<code class="js">var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}</code>

Dalam kod ini, kami melingkar melalui butang radio, melampirkan pendengar perubahan pada setiap satu dan tentukan pembolehubah prev untuk menyimpan butang yang telah disemak sebelumnya. Apabila peristiwa perubahan butang dicetuskan, kami mendapatkan semula nilai butang yang disemak sebelum ini (jika ada), log nilai butang sebelumnya dan butang yang baru disemak dan kemas kini sebelumnya untuk merujuk butang yang baru disemak.

Ini pendekatan membolehkan kami menangkap kedua-dua keadaan butang radio yang ditanda dan tidak ditanda, menyediakan mekanisme pengendalian acara yang lebih lengkap.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menjejaki Kedua-dua Keadaan Butang Radio yang Disemak dan Tidak Disemak dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!