Bagaimanakah Saya Mendapatkan Nilai Butang Radio Terpilih dengan Cekap dalam JavaScript?

Mengakses Nilai Butang Radio dalam JavaScript

Apabila bekerja dengan input butang radio dalam JavaScript, adalah penting untuk mendapatkan semula nilai pilihan yang dipilih. Walau bagaimanapun, menghadapi masalah dengan pelaksanaan sedemikian boleh mengecewakan. Mari kita siasat masalah biasa dan penyelesaiannya.

Masalah

Pertimbangkan coretan kod berikut:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;
    for (i=0; i < sizes.length; i++) {
        if (sizes[i].checked==true) {
            return sizes[i].value;
        }
    }
}

Walaupun tujuan yang dimaksudkan, kod ini secara konsisten mengembalikan 'tidak ditentukan' apabila cuba mengakses butang radio yang dipilih nilai.

Penyelesaian

Untuk menyelesaikan isu ini, kita boleh memanfaatkan pendekatan moden menggunakan kaedah querySelector():

document.querySelector('input[name="genderS"]:checked').value;

Baris ini kod mendapatkan semula nilai butang radio yang dipilih dengan menggunakan pemilih :checked dalam querySelector() kaedah.

Kelebihan

Penyelesaian ini menawarkan beberapa faedah:

• Keserasian Pelayar: Kaedah ini berfungsi dengan lancar merentas pelbagai pelayar web.
• Kesederhanaan: Ia merupakan pendekatan ringkas dan mudah yang menghapuskan keperluan untuk gelung kompleks atau iterator.
• Dinamik: Ia secara dinamik memilih butang radio yang diperiksa, tanpa mengira kedudukannya dalam DOM.

Pelaksanaan

HTML:

<form action="#n" name="theForm">
    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</a>
</form>

JavaScript:

function submitForm() {
    var gender = document.querySelector('input[name="genderS"]:checked').value;
    alert(gender);
}

Nota: Anda tidak perlu memasukkan laluan jQuery dalam pelaksanaan ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Mendapatkan Nilai Butang Radio Terpilih dengan Cekap dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!