Bagaimana cara mendapatkan nilai dari tombol radio yang dipilih?

Saya ingin mendapatkan nilai yang dipilih dari sekelompok tombol radio.

Inilah HTML saya:

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate  
</div>

Ini .js saya:

var rates = document.getElementById('rates').value;
var rate_value;
if(rates =='Fixed Rate'){
    rate_value = document.getElementById('r1').value;

}else if(rates =='Variable Rate'){
    rate_value = document.getElementById('r2').value;

}else if(rates =='Multi Rate'){
    rate_value = document.getElementById('r3').value;
}  

document.getElementById('results').innerHTML = rate_value;

Saya terus terdefinisi.

var rates = document.getElementById('rates').value;

Elemen kurs adalah a div, jadi tidak akan memiliki nilai. Ini mungkin dari mana undefinedasalnya.

The checkedproperti akan memberitahu Anda apakah elemen yang dipilih:

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

Ini berfungsi di IE9 dan di atas dan semua browser lainnya.

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

Anda bisa mendapatkan nilainya dengan menggunakan checkedproperti.

var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
    }
}

Untuk Anda yang tinggal di tepi:

Sekarang ada sesuatu yang disebut RadioNodeList dan mengakses properti nilainya akan mengembalikan nilai input yang saat ini diperiksa. Ini akan menghapus perlunya menyaring input 'dicentang' seperti yang kita lihat di banyak jawaban yang diposting.

Formulir Contoh

<form id="test">
<label><input type="radio" name="test" value="A"> A</label>
<label><input type="radio" name="test" value="B" checked> B</label>
<label><input type="radio" name="test" value="C"> C</label>
</form>

Untuk mengambil nilai yang dicentang, Anda dapat melakukan sesuatu seperti ini:

var form = document.getElementById("test");
alert(form.elements["test"].value);

JSFiddle untuk membuktikannya: http://jsfiddle.net/vjop5xtq/

Harap perhatikan ini diterapkan di Firefox 33 (Semua peramban utama lainnya sepertinya mendukungnya). Browser yang lebih lama akan membutuhkan polfyill RadioNodeListagar ini berfungsi dengan baik

Yang bekerja untuk saya diberikan di bawah ini dari api.jquery.com.

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

Pilihan variabel yang dipilih akan berisi nilai tombol radio yang dipilih (yaitu) o1 atau o2

Pilihan lain (tampaknya lebih tua) adalah menggunakan format: "document.nameOfTheForm.nameOfTheInput.value;" misalnya document.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

Anda bisa merujuk ke elemen dengan namanya di dalam formulir. HTML asli Anda tidak mengandung elemen formulir.

Fiddle di sini (berfungsi di Chrome dan Firefox): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

Gunakan document.querySelector ('input [type = radio]: checked'). Value; untuk mendapatkan nilai dari kotak centang yang dipilih, Anda dapat menggunakan atribut lain untuk mendapatkan nilai seperti nama = jenis kelamin dll. silakan pergi melalui potongan di bawah ini pasti akan membantu Anda,

Larutan

document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    result.innerHTML = 'You Gender: '+gender;
}

<form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Male" checked/>Male
    <input type="radio" name="gender" value="Female" />Female
    <input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>

Terima kasih

KODE HTML:

<input type="radio" name="rdoName" value="YES"/> <input type="radio" name="rdoName" value="NO"/>

KODE JQUERY:

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

$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>

Kamu akan mendapatkan

value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"

Dalam Javascript kita bisa mendapatkan nilai dengan menggunakan " getElementById()" ID dalam kode di atas yang Anda posting mengandung nama bukan Id sehingga Anda memodifikasi seperti ini

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

gunakan nilai ini sesuai dengan kode Anda

Setahun atau lebih telah berlalu sejak pertanyaan diajukan, tetapi saya pikir peningkatan substansial dari jawaban itu mungkin. Saya menemukan ini skrip yang paling mudah dan serbaguna, karena memeriksa apakah tombol telah diperiksa, dan jika demikian, apa nilainya:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Check radio checked and its value</title>
</head>
<body>

    <form name="theFormName">
        <input type="radio" name="theRadioGroupName" value="10">
        <input type="radio" name="theRadioGroupName" value="20">
        <input type="radio" name="theRadioGroupName" value="30">
        <input type="radio" name="theRadioGroupName" value="40">
        <input type="button" value="Check" onclick="getRadioValue('theRadioGroupName')">
    </form>

    <script>
        function getRadioValue(groupName) {
            var radios = theFormName.elements[groupName];
            window.rdValue; // declares the global variable 'rdValue'
            for (var i=0; i<radios.length; i++) {
                var someRadio = radios[i];
                if (someRadio.checked) {
                    rdValue = someRadio.value;
                    break;
                }
                else rdValue = 'noRadioChecked';
            }
            if (rdValue == '10') {
                alert('10'); // or: console.log('10')
            }
            else if (rdValue == 'noRadioChecked') {
                alert('no radio checked');
            }
        }
    </script>
</body>
</html>

Anda juga dapat memanggil fungsi di dalam fungsi lain, seperti ini:

function doSomething() {
    getRadioValue('theRadioGroupName');
    if (rdValue == '10') {
        // do something
    }
    else if (rdValue == 'noRadioChecked') {
        // do something else
    }  
} 

Dengan asumsi elemen form Anda dirujuk oleh myFormvariabel di bawah ini, dan bahwa tombol radio Anda membagikan nama "my-radio-button-group-name", berikut ini adalah JavaScript murni dan patuh standar (walaupun saya belum memeriksanya agar tersedia di mana saja) ):

myForm.elements.namedItem("my-radio-button-group-name").value

Hal di atas akan menghasilkan nilai elemen tombol radio yang dicentang (atau disebut juga), jika ada, atau nullsebaliknya. Inti dari solusinya adalah namedItemfungsi yang bekerja dengan tombol radio secara khusus.

Lihat HTMLFormElement.elements , HTMLFormControlsCollection.namedItem dan terutama RadioNodeList.value , seperti namedItem biasanya mengembalikan RadioNodeListobjek.

Saya menggunakan MDN karena memungkinkan seseorang untuk melacak kepatuhan standar, setidaknya untuk tingkat yang besar, dan karena lebih mudah untuk dipahami daripada banyak publikasi WhatWG dan W3C.

langsung memanggil tombol radio berkali-kali memberi Anda nilai tombol FIRST, bukan tombol CHECKED. daripada mengulang-ulang melalui tombol radio untuk melihat mana yang dicentang, saya lebih suka memanggil onclickfungsi javascript yang menetapkan variabel yang nantinya dapat diambil sesuai keinginan.

<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >

yang memanggil:

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false; 
}

keuntungan tambahan adalah bahwa saya dapat menangani data dan / atau bereaksi terhadap pemeriksaan tombol (dalam hal ini, mengaktifkan tombol SUBMIT).

Peningkatan ke fungsi yang disarankan sebelumnya:

function getRadioValue(groupName) {
    var _result;
    try {
        var o_radio_group = document.getElementsByName(groupName);
        for (var a = 0; a < o_radio_group.length; a++) {
            if (o_radio_group[a].checked) {
                _result = o_radio_group[a].value;
                break;
            }
        }
    } catch (e) { }
    return _result;
}

Saya mengambil masalah ini dengan javascript murni adalah untuk menemukan node yang diperiksa, menemukan nilainya dan mengeluarkannya dari array.

var Anodes = document.getElementsByName('A'),
    AValue = Array.from(Anodes)
       .filter(node => node.checked)
       .map(node => node.value)
       .pop();
console.log(AValue);

Perhatikan bahwa saya menggunakan fungsi panah . Lihat biola ini sebagai contoh kerja.

Jika Anda menggunakan jQuery:

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

Anda dapat menggunakan .find()untuk memilih elemen yang diperiksa:

var radio = Array.from(document.querySelectorAll('#rate input'))

var value = radio.length && radio.find(r => r.checked).value

<form id="rates">
  <input type="radio" name="rate" value="Fixed Rate"> Fixed
  <input type="radio" name="rate" value="Variable Rate"> Variable
  <input type="radio" name="rate" value="Multi Rate" checked> Multi
</form>

kemudian...

var rate_value = rates.rate.value;

periksa nilai dengan ID:

var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;

Saya menggunakan fungsi jQuery.click untuk mendapatkan hasil yang diinginkan:

$('input[name=rate]').click(function(){
  console.log('Hey you clicked this: ' + this.value);

  if(this.value == 'Fixed Rate'){
    rate_value = $('#r1').value;
  } else if(this.value =='Variable Rate'){
   rate_value = $('#r2').value;
  } else if(this.value =='Multi Rate'){
   rate_value = $('#r3').value;
  }  

  $('#results').innerHTML = rate_value;
});

Semoga ini bisa membantu.

Jika tombol dalam bentuk
var myform = new FormData(getformbywhatever); myform.get("rate");
QuerySelector di atas adalah solusi yang lebih baik. Namun, metode ini mudah dimengerti, terutama jika Anda tidak memiliki petunjuk tentang CSS. Ditambah lagi, bidang input sangat mungkin dalam bentuk.
Tidak memeriksa, ada solusi serupa lainnya, maaf untuk pengulangan

var rates = document.getElementById('rates').value;

tidak bisa mendapatkan nilai dari tombol radio seperti itu yang digunakan

rate_value = document.getElementById('r1').value;

Jika Anda menggunakan JQuery, silakan gunakan bellow snippet untuk grup tombol radio.

var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();

Cukup gunakan: document.querySelector('input[rate][checked]').value

Anda juga dapat memutar melalui tombol dengan forEach-loop pada elemen

    var elements = document.getElementsByName('radioButton');
    var checkedButton;
    console.log(elements);
    elements.forEach(e => {
        if (e.checked) {
            //if radio button is checked, set sort style
            checkedButton = e.value;
        }
    });

https://codepen.io/anon/pen/YQxbZJ

HTML

<div id="rates">
<input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="x2" name="rate" value="Variable Rate" 
checked="checked"> Variable Rate
<input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate
</div>

<button id="rdio"> Check Radio </button>
<div id="check">

</div>

JS

var x ,y;
var x = document.getElementById("check");
function boom()
{
if (document.getElementById("x1").checked)
  y = document.getElementById("x1").value;

else if(document.getElementById("x2").checked)
  y = document.getElementById("x2").value;

else if (document.getElementById("x3").checked)
  y = document.getElementById("x3").value;
else
  y = "kuch nhi;"
x.innerHTML = y;
}

var z = document.getElementById('rdio');
z.addEventListener("click", boom);`

Di php itu
halaman html sangat mudah

Male<input type="radio" name="radio" value="male"><br/>
Female<input type="radio" name="radio" value="female"><br/>
Others<input type="radio" name="radio" value="other"><br/>
<input type="submit" value="submit">

Ambil nilai dari formulir ke php

$radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}