Saya mengalami beberapa masalah aneh dengan program JS saya. Saya memiliki ini berfungsi dengan baik tetapi untuk beberapa alasan tidak lagi berfungsi Saya hanya ingin menemukan nilai tombol radio (mana yang dipilih) dan mengembalikannya ke variabel. Untuk beberapa alasan ia terus kembali undefined.

Ini kode saya:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm:

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

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>

Anda dapat melakukan sesuatu seperti ini:

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++) {
  if (radios[i].checked) {
    // do whatever you want with the checked radio
    alert(radios[i].value);

    // only one radio can be logically checked, don't check the rest
    break;
  }
}

<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

Sunting: Terima kasih HATCHA dan jpsetung untuk saran edit Anda.

Ini berfungsi dengan penjelajah mana pun.

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

Ini adalah cara sederhana untuk mendapatkan nilai dari jenis input apa pun. Anda juga tidak perlu menyertakan jalur jQuery.

document.forms.your-form-name.elements.radio-button-name.value

Sejak jQuery 1.8, sintaks yang benar untuk kueri adalah

$('input[name="genderS"]:checked').val();

Tidak $('input[@name="genderS"]:checked').val();lagi, yang berfungsi di jQuery 1.7 (dengan @ ).

Versi ECMAScript 6

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;

Solusi paling sederhana:

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

Coba ini

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


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

Seekor biola di sini .

Sunting: Seperti yang dikatakan oleh Chips_100 Anda harus menggunakan:

var sizes = document.theForm[field];

langsung tanpa menggunakan variabel tes.

Jawaban lama:

Bukankah seharusnya Anda evalsuka ini?

var sizes = eval(test);

Saya tidak tahu cara kerjanya, tetapi bagi saya Anda hanya menyalin sebuah string.

Ini murni JavaScript, berdasarkan jawaban oleh @Fontas tetapi dengan kode pengaman untuk mengembalikan string kosong (dan menghindari a TypeError) jika tidak ada tombol radio yang dipilih:

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

Kode rusak seperti ini:

• Baris 1: dapatkan referensi ke kontrol yang (a) merupakan <input>tipe, (b) memiliki nameatribut genderS, dan (c) dicentang.
• Baris 2: Jika ada kontrol seperti itu, kembalikan nilainya. Jika tidak, kembalikan string kosong. The genderSRadiovariabel truthy jika Jalur 1 temuan kontrol dan nol / falsey jika tidak.

Untuk JQuery, gunakan jawaban @ jbabey, dan perhatikan bahwa jika tidak ada tombol radio yang dipilih, ia akan kembali undefined.

Jika seseorang mencari jawaban dan mendarat di sini seperti saya, dari Chrome 34 dan Firefox 33 Anda dapat melakukan hal berikut:

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

atau lebih sederhana:

alert(document.theForm.genderS.value);

refrence: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Berikut adalah Contoh untuk Radio di mana atribut Checked = "checked" tidak digunakan

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

DEMO : http://jsfiddle.net/ipsjolly/hgdWp/2/ [ Klik Temukan tanpa memilih Radio apa pun ]

Sumber: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

Berikut cara yang bagus untuk mendapatkan nilai tombol radio yang dicentang dengan JavaScript biasa:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

Sumber: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

Menggunakan HTML ini:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

Anda juga dapat menggunakan Array Find the checkedproperty untuk menemukan barang yang dicentang:

Array.from(form.elements.characters).find(radio => radio.checked);

Menggunakan javascript murni, Anda bisa menangani referensi ke objek yang mengirim acara.

function (event) {
    console.log(event.target.value);
}

misalkan Anda perlu menempatkan baris tombol radio yang berbeda dalam formulir, masing-masing dengan nama atribut yang terpisah ('option1', 'option2' dll) tetapi dengan nama kelas yang sama. Mungkin Anda membutuhkannya dalam beberapa baris di mana mereka masing-masing akan mengirimkan nilai berdasarkan skala 1 hingga 5 yang berkaitan dengan pertanyaan. Anda dapat menulis javascript seperti:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

Saya juga akan memasukkan hasil akhir ke dalam elemen formulir tersembunyi untuk dikirimkan bersama dengan formulir.

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

Jika mungkin bagi Anda untuk menetapkan Id untuk elemen formulir Anda (), cara ini dapat dianggap sebagai cara alternatif yang aman (khususnya ketika nama elemen grup radio tidak unik dalam dokumen):

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML:

<form action="#n" name="theForm" id="yourFormId">

 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

dll kemudian gunakan saja

  $("#rdbExamples:checked").val()

Atau

   $('input[name="rdbExampleInfo"]:checked').val();

    var value = $('input:radio[name="radiogroupname"]:checked').val();