Seçilen radyo düğmesinin değeri nasıl alınır?

Seçilen değeri bir grup radyo düğmesinden almak istiyorum.

İşte benim HTML:

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

İşte benim .js:

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;

Tanımsız olmaya devam ediyorum.

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

Rate öğesi a'dır div, dolayısıyla bir değeri olmayacaktır. Muhtemelen buradan undefinedgeliyor.

checkedMülkiyet eleman seçili olup olmadığını söyleyecektir:

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

Bu IE9 ve üstü ve diğer tüm tarayıcılarda çalışır.

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

checkedÖzelliği kullanarak değeri alabilirsiniz .

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

Kenarda yaşayan insanlar için:

Artık RadioNodeList olarak adlandırılan bir şey var ve değer özelliğine erişmek o anda denetlenen girişin değerini döndürecektir. Bu, gönderilen cevapların çoğunda gördüğümüz gibi, ilk olarak 'kontrol edilen' girişin filtrelenmesi gerekliliğini ortadan kaldıracaktır.

Örnek Form

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

İşaretli değeri almak için şöyle bir şey yapabilirsiniz:

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

JSFiddle bunu kanıtlayacak: http://jsfiddle.net/vjop5xtq/

Bunun Firefox 33'te uygulandığını lütfen unutmayın (Diğer tüm büyük tarayıcılar bunu destekliyor gibi görünüyor). Eski tarayıcıların RadioNodeListdüzgün çalışması için bir polfyill gerekir

Benim için çalışan biri aşağıda api.jquery.com adresinden verilmiştir.

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

SelectedOption değişkeni seçilen radyo düğmesinin değerini içerir (yani) o1 veya o2

Başka bir (görünüşte daha eski) seçenek şu biçimi kullanmaktır: "document.nameOfTheForm.nameOfTheInput.value;" örn. 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>

Bir form içindeki öğeye adıyla başvurabilirsiniz. Orijinal HTML'niz bir form öğesi içermiyor.

Fiddle here (Chrome ve Firefox'ta çalışır): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

Kullanım document.querySelector ( 'giriş [türü = radyo]: kontrol') değeri;. seçili onay kutusunun değerini almak için, name = cinsiyet vb. gibi değer almak için diğer özellikleri kullanabilirsiniz . lütfen snippet'in altından geçin kesinlikle size yardımcı olacaktır,

Çözüm

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>

Teşekkür ederim

HTML KODU:

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

JQUERY KODU:

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"/>

Alacaksın

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

Javascript'te getElementById(), yukarıdaki kodda Id'in " " değerini kullanarak değerleri alabiliriz, bu nedenle değiştirmek için Id değil ad içermiyor

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

kodunuza göre bu oran değerini kullanın

Sorunun sorulmasından bu yana bir yıl geçti, ancak cevaplarda önemli bir iyileşmenin mümkün olduğunu düşündüm. Bir düğmenin kontrol edilip edilmediğini ve eğer öyleyse, değerinin ne olduğunu kontrol ettiği için bunu en kolay ve en çok yönlü komut dosyası olarak görüyorum:

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

İşlevi şu şekilde başka bir işlev içinde de çağırabilirsiniz:

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

Form öğenize myFormaşağıdaki değişken tarafından atıfta bulunulduğu ve radyo düğmelerinizin "my-radio-button-group-name" adını paylaştığı varsayıldığında , aşağıdakiler saf JavaScript ve standartlarla uyumludur (her yerde kullanılabilir olup olmadığını kontrol etmeme rağmen) ):

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

Yukarıdakiler , eğer varsa, ya da başka bir şekilde, işaretlenmiş (ya da aynı zamanda da denir) seçilmiş bir radyo düğmesi elemanının değerini verecektir null. Çözümün özü, namedItemözellikle radyo düğmeleriyle çalışan işlevdir.

Genellikle bir nesne döndürdüğü gibi HTMLFormElement.elements , HTMLFormControlsCollection.namedItem ve özellikle RadioNodeList.value öğelerine bakın .namedItem RadioNodeList

MDN kullanıyorum çünkü standart uyumluluğunu en azından büyük ölçüde izlemesine izin veriyor ve birçok WhatWG ve W3C yayınından daha kolay anlaşılabildiğinden.

bir radyo düğmesini birçok kez doğrudan aramak, KONTROL düğmesinin değil İLK düğmesinin değerini verir. hangisinin kontrol edildiğini görmek için radyo düğmeleri arasında döngü yerine, onclickdaha sonra irade alınabilir bir değişken ayarlar bir javascript işlevini çağırmayı tercih .

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

hangi çağrıları yapar:

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

Ek avantaj, verileri tedavi edebilmem ve / veya bir düğmenin kontrolüne tepki verebilmemdir (bu durumda, SUBMIT düğmesini etkinleştir).

Önceki önerilen işlevlerde iyileştirme:

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

Bu sorunu saf javascript ile almam, kontrol edilen düğümü bulmak, değerini bulmak ve diziden dışarı çıkarmaktır.

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

Ok işlevlerini kullandığımı unutmayın . Çalışan bir örnek için bu kemanı inceleyin .

JQuery kullanıyorsanız:

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

.find()İşaretli öğeyi seçmek için kullanabilirsiniz :

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>

sonra...

var rate_value = rates.rate.value;

değeri kimliğe göre kontrol et:

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

İstenilen çıktıyı almak için jQuery.click işlevini kullandım:

$('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;
});

Umarım yardımcı olur.

Düğmeler
var myform = new FormData(getformbywhatever); myform.get("rate");
yukarıdaki bir formda ise, QuerySelector daha iyi bir çözümdür. Ancak, özellikle CSS hakkında bir ipucunuz yoksa, bu yöntemin anlaşılması kolaydır. Ayrıca, girdi alanlarının zaten bir biçimde olması muhtemeldir.
Kontrol etmedim, başka benzer çözümler var, tekrar için özür dilerim

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

bunun gibi bir radyo düğmesinin değerlerini alamaz

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

Kullanıyorsanız JQuery, lütfen radyo düğmesi grubu için feryat snippet'ini kullanın.

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

Basitçe kullanın: document.querySelector('input[rate][checked]').value

Ayrıca, öğeler üzerinde forEach döngüsü bulunan düğmeler arasında geçiş yapabilirsiniz

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

Php çok kolay
html sayfası

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

Formdan php'ye değer al

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