Bagaimana Mengendalikan Kedua-dua Semak dan Nyahtanda Acara untuk Butang Radio dalam JavaScript?

Barbara Streisand
Lepaskan: 2024-10-31 05:31:30
asal
617 orang telah melayarinya

How to Handle Both Check and Uncheck Events for Radio Buttons in JavaScript?

Acara OnChange untuk Butang Radio: Mengendalikan Acara Semak dan Nyahtanda

Apabila bekerja dengan butang radio, adalah penting untuk mengendalikan kedua-dua acara semak dan nyahtanda dengan berkesan. Acara onChange standard tidak memenuhi perkara ini, kerana ia hanya tercetus apabila butang radio dipilih. Ini meninggalkan jurang dalam mengenal pasti apabila pilihan sebelumnya dinyahpilih.

Penyelesaian untuk Peristiwa OnChange:

Pertimbangkan coretan kod berikut:

<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>
Salin selepas log masuk

Skrip ini mencapai yang diingini tingkah laku:

  1. Ia berulang pada semua butang radio.
  2. Untuk setiap butang radio, pendengar acara ditambahkan pada acara onChange.
  3. Apabila butang radio dihidupkan diperiksa, ia mencatatkan nilai butang radio yang disemak sebelum ini (jika ada) dan mengemas kini rujukan kepada butang radio yang sedang disemak.

Penyelesaian ini menangkap kedua-dua acara semak dan nyahtanda, membolehkan anda untuk akses kedua-dua nilai butang radio yang telah disemak sebelum ini dan pada masa ini.

Penghadan Acara OnClick:

Acara onClick, walaupun lebih konsisten merentas penyemak imbas, masih tidak menangani isu penangkapan acara nyahtanda . Oleh itu, walaupun ia boleh dipertimbangkan untuk kes penggunaan tertentu, ia bukan penyelesaian lengkap untuk mengendalikan kedua-dua acara semak dan nyahtanda dengan butang radio.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Kedua-dua Semak dan Nyahtanda Acara untuk Butang Radio dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan