Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menjejaki Nilai Butang Radio yang dinyahpilih dengan Acara OnChange?

Bagaimana untuk Menjejaki Nilai Butang Radio yang dinyahpilih dengan Acara OnChange?

DDD
DDDasal
2024-10-29 03:57:02371semak imbas

How to Track Deselected Radio Button Values with OnChange Events?

Penyelesaian untuk Acara OnChange dalam Nilai Butang Radio

Apabila menggunakan butang radio dengan nama yang sama, anda mungkin menghadapi had di mana acara onChange tidak mencetuskan apabila butang radio dinyahpilih. Ini boleh menimbulkan kesukaran dalam menjejak nilai yang dipilih sebelum ini.

Pendekatan Penyelesaian

Untuk mengatasinya, anda boleh menggunakan gabungan teknik:

  1. Lelaran Melalui Butang Radio: Lelaran pada semua butang radio dengan nama yang sama menggunakan JavaScript.
  2. Pendengar Acara untuk Perubahan: Tambahkan pendengar acara untuk acara perubahan ke setiap butang radio.
  3. Radio Sebelumnya: Mulakan pembolehubah, sebelum, di luar pendengar acara untuk menyimpan nilai nol pada mulanya.
  4. Dalam Pendengar Acara: Dalam pendengar acara, tindakan berikut berlaku:

    • Jika terdapat nilai sebelumnya, log nilainya ke konsol.
    • Kemas kini nilai sebelumnya kepada butang radio semasa.
    • Log nilai butang radio semasa ke konsol.

Contoh Kod:

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

Contoh Borang:

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

Nota Tambahan:

  • Pendekatan ini membolehkan anda menjejaki kedua-dua yang dipilih sebelum ini dan nilai butang radio yang baru dipilih.
  • Konsep ini boleh dilanjutkan untuk mengendalikan berbilang kumpulan butang radio.

Atas ialah kandungan terperinci Bagaimana untuk Menjejaki Nilai Butang Radio yang dinyahpilih dengan Acara OnChange?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn