Bagaimana cara mendapatkan nilai dari tombol radio yang dipilih?


316

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.


50
Anda tidak menggunakan jQuery di sini, tetapi jika Anda menginginkannya, Anda dapat menggunakan ini:$("input[type='radio'][name='rate']:checked").val();
GJK

Mengapa Anda tidak bisa memeriksa objek itu? Pokoknya Anda perlu menggunakan.checked
Amol M Kulkarni


Saya tidak yakin apakah itu diperlukan atau tidak, tetapi merupakan kebiasaan yang baik untuk meletakkan tombol radio dalam <form></form>wadah.
Kamil

Jawaban:


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

229
Dalam jquery itu akan$("input[name=rate]:checked").val()
Kamran Ahmed

1
Saya tidak mengerti, apakah ada dua elemen dengan ID yang sama?
mzalazar

3
@ mzalazar Tidak, setiap tombol radio memiliki ID sendiri tetapi semua memiliki nama yang sama yang menempatkan mereka ke dalam satu grup jadi jika Anda memilih satu yang lain akan dipilih. Dengan jawaban Kamran Ahmed, Anda dapat memeriksa tombol radio mana dalam grup yang dipilih dan hanya mendapatkan nilai yang dipilih (dicentang).
Broco

4
kode mahdavipanah tepat di atas (dengan [checked]) mencari atribut (yaitu keadaan awal). Anda sebaiknya menggunakan :checked, yang mencari properti (yaitu keadaan saat ini), dan yang hampir selalu apa yang Anda inginkan.
Gras Double

5
Dalam Javascript itu akan menjadidocument.querySelectorAll("input[name=rate]:checked")[0].value
Vincent McNabb

521

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

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

13
Tentu saja Anda harus memeriksa apakah querySelector mengembalikan nol. Ini adalah kasus jika tidak ada tombol radio yang dicentang.
Robert

18
@ KamranAhmed: Solusi jQuery Anda hadir dengan biaya yang jauh lebih besar.

5
ParthikGosar: IE8 tidak mendukung :checkedpemilih.

14
Perhatikan bahwa tanda kutip di sekitar ratetidak diperlukan.
mbomb007

1
@KamranAhmed hingga dan kecuali Anda dapat membuat profil di atas dan / atau memeriksa implementasi di balik panggilan, Anda tidak dapat mengatakan lebih banyak tentang kinerja di atas daripada yang dapat Anda katakan tentang oneliner lain yang memanggil kode asli. Kami tidak memiliki informasi yang cukup untuk berspekulasi bagaimana peramban mengelola untuk menemukan :checkedelemen - mungkin memiliki segalanya "hash dan di-cache" dan ini adalah O(1)operasi. Kecuali Anda memrofilinya untuk menunjukkan sesuatu seperti waktu kueri bertambah dengan jumlah elemen pada halaman, atau kecuali Anda memahami kode sumber browser di belakangnya, Anda tidak bisa mengatakannya.
amn

144

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

13
Mengingat bahwa hanya satu radio yang dapat diperiksa, saya biasanya mengharapkan breakatau returnpernyataan di dalam ifblok untuk menghentikan lintasan tambahan melalui loop. Poin kecil, tapi gaya yang bagus.
RobP

1
Ini adalah implementasi vanilla terbersih untuk pertanyaan ini. Pujian!
SeaWarrior404

37

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


1
form.elements["test"].valuebekerja sangat baik di Chrome [Versi 49.0.2623.87 m].
Evan Hu

Itu harus berupa formulir, tidak bisa menggunakan misalnya div. Kalau tidak, ini bekerja di FF 71.0.
Andrew

16

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


11

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/


1
Ini adalah format DOM lama yang jauh lebih tua dan benar-benar tidak boleh digunakan lagi karena terbatas pada elemen tertentu dan tidak mengimbangi standar saat ini.
j08691

@ j08691 Ah oke terima kasih sudah memberi tahu saya. Ini adalah salah satu hal yang saya pelajari di kelas Universitas. Mungkin lebih baik tidak mempercayai apa pun dari sana dan hanya menggunakan referensi online saja.
JHS

6
"... tidak mengimbangi standar saat ini." bukan argumen yang meyakinkan. Tolong jelaskan. Jika berhasil, itu akan berhasil. Itu juga lebih sedikit baris dari jawaban yang diterima yang hanya menentukan apakah opsi yang dipilih adalah 'Tingkat Tetap'.
nol-dan-satu

Biola di atas sepertinya tidak berfungsi dengan browser Safari (7.1.4). Nilai ditampilkan sebagai tidak terdefinisi, mengubah status tombol radio tidak memengaruhi itu.
Stuart R. Jefferys

Ya, ini juga tidak berfungsi dengan browser Edge (40.15063.0.0). Jika mereka tidak lagi menggunakan cara ini, sepertinya aneh, karena cara ini lebih sederhana dan masuk akal karena tombol radio dikelompokkan berdasarkan sifatnya. Sebagian besar jawaban lain terlihat seperti mereka memeriksa kotak centang.
mikato

10

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


7

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"

5

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


5

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

5

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.


Ketika saya menulis jawaban saya membaca sekilas jawaban yang ada, dan tidak melihat apa pun yang menyerupai apa yang ingin saya bagikan. Sekarang saya melihat bahwa saya melewatkan setidaknya dua solusi serupa. Meskipun, tidak ada yang menulis saran kode mereka menggunakan sintaks tertentu yang saya terapkan, tetapi ide umumnya sama. FYI. Intinya adalah untuk mendapatkan referensi RadioNodeListmelalui sesuatu seperti form.elements[name]atau form[name](mungkin, spekulasi) atau melalui sintaksis saya di atas.
amn

3

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).


5
Anda harus mengikat onchangeacara sebagai gantinya, dalam kasus pengguna menggunakan keyboard.
John Dvorak

2

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

2

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.


Saya akan menambahkan tagName === 'INPUT'cek untuk memastikan Anda tidak bekerja pada tag apa pun selain input.
Aternus


1

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

1
Saya tidak tahu Array. Temukan, menyukainya! Tapi ini akan pecah jika tidak ada elemen yang diperiksa.
pongi

0
<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;

Bisakah Anda menjelaskan bagaimana ini menjawab pertanyaan?
soundslikeodd

" dapatkan nilai yang dipilih dari sekelompok tombol radio ": rates.rate.valuenotrates.value
user7420100

Ini jawaban yang benar. document.getElementById("rates").rate.value[atau]document.forms[0].rate.value
Atika

0

periksa nilai dengan ID:

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

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.


0

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


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

tidak bisa mendapatkan nilai dari tombol radio seperti itu yang digunakan

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

untuk mendapatkan nilai tag HTML, gunakan document.getElementById ('r1'). innerHtml
James Cluade

0

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

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

0

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


Tidak bekerja untuk saya; lihat sintaksis serupa di atas dari Pawan yang melakukannya. Seperti di,document.querySelector('input[name = rate]:checked').value
Tim Erickson

0

   var rates=document.getElementsByName("rate");
            for (i = 0; i < rates.length; i++) {
            if (rates[i].checked) {
              console.log(rates[i].value);
              rate=rates[i].value;
              document.getElementById("rate").innerHTML = rate;
              alert(rate);
              
            }
          }
        <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>
        </br>
        <div id='rate'>
        </div>


0

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

-1

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

-2

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/>
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.