Cara Menangkap Peristiwa Nyahpilihan Butang Radio: Melangkaui Had onChange

Kekeliruan Butang Radio: Menyelesaikan Pengehadan onChange

Butang radio menyediakan cara yang mudah untuk mengendalikan pilihan tunggal, tetapi menangkap perubahan keadaan penuhnya boleh mencabar. Pertimbangkan senario di mana kami mempunyai berbilang butang radio dengan nama yang sama dan perlu menjejaki kedua-dua pilihan dan nyahpilihan.

Acara onChange kelihatan seperti pilihan yang jelas, tetapi ia tidak menyala apabila butang radio dinyahpilih. Ini menimbulkan masalah dalam senario di mana kita perlu menangkap kedua-dua peristiwa yang disemak dan tidak disemak.

Penyelesaian

Satu penyelesaian ialah menggunakan kaedah addEventListener dan melampirkan pengendali acara perubahan kepada setiap butang radio. Di dalam pengendali acara, kita boleh mengekalkan rujukan kepada butang radio yang disemak sebelum ini (sebelum ini) menggunakan pembolehubah.

Apabila butang radio disemak, kami log kedua-dua nilai sebelumnya (nilai sebelumnya) dan semasa nilai (ini.nilai). Ini membolehkan kami menangkap kedua-dua peristiwa yang disemak dan tidak disemak.

<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)
    });
}

Kod HTML yang disertakan:

<code class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form></code>

Dengan penyelesaian ini, kami mempunyai penyelesaian umum yang menangkap peristiwa onChange untuk semua radio butang, termasuk acara nyahpilihan.

Atas ialah kandungan terperinci Cara Menangkap Peristiwa Nyahpilihan Butang Radio: Melangkaui Had onChange. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!