Jak uzyskać wartość wybranego przycisku opcji?


316

Chcę uzyskać wybraną wartość z grupy przycisków opcji.

Oto mój 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>

Oto mój .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;

Nadal jestem niezdefiniowany.


50
Nie używasz tutaj jQuery, ale jeśli kiedykolwiek zechcesz, możesz użyć tego:$("input[type='radio'][name='rate']:checked").val();
GJK

Dlaczego nie możesz sprawdzić tego obiektu? W każdym razie musisz użyć.checked
Amol M Kulkarni


Nie jestem pewien, czy jest to wymagane, czy nie, ale dobrym zwyczajem jest umieszczanie przycisków opcji w <form></form>pojemniku.
Kamil

Odpowiedzi:


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

Element stawek jest div, więc nie będzie miał wartości. Prawdopodobnie undefinedstąd pochodzi.

checkedNieruchomość powie Ci, czy dany element jest wybrany:

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

229
W jquery byłoby$("input[name=rate]:checked").val()
Kamran Ahmed

1
Nie rozumiem, czy są dwa elementy o tym samym identyfikatorze?
mzalazar

3
@mzalazar Nie, każdy przycisk opcji ma swój własny identyfikator, ale wszystkie mają tę samą nazwę, co powoduje, że należą do jednej grupy, więc jeśli wybierzesz jedną, druga zostanie odznaczona. Dzięki odpowiedzi Kamrana Ahmeda możesz sprawdzić, który z przycisków opcji w grupie jest wybrany i uzyskać tylko wartość wybranego (zaznaczonego) przycisku.
Broco

4
Kod mahdavipanah tuż powyżej (z [checked]) szuka atrybutu (tj. stanu początkowego). Zamiast tego powinieneś użyć :checked, który szuka właściwości (tj. Aktualny stan) i który jest prawie zawsze tym, czego chcesz.
Gras Double

5
W Javascript byłby todocument.querySelectorAll("input[name=rate]:checked")[0].value
Vincent McNabb,

519

Działa to w IE9 i wyżej oraz we wszystkich innych przeglądarkach.

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

13
Oczywiście musisz sprawdzić, czy querySelector zwraca null. Dzieje się tak, jeśli nie zaznaczono żadnego przycisku opcji.
Robert

18
@KamranAhmed: Twoje rozwiązanie jQuery ma znacznie większy koszt.

5
ParthikGosar: IE8 nie obsługuje :checkedselektora.

14
Pamiętaj, że cudzysłowy ratenie są wymagane.
mbomb007

1
@KamranAhmed do i dopóki nie możesz profilować powyższego i / lub sprawdzić implementacji stojącej za połączeniem, nie możesz powiedzieć nic więcej o wydajności powyższego, niż możesz powiedzieć o jakimkolwiek innym programie oneliner, który wywołuje kod natywny. Nie mamy wystarczających informacji, aby spekulować, w jaki sposób przeglądarka udaje się zlokalizować :checkedelement (elementy) - być może ma wszystko „zakodowane i buforowane” i jest to O(1)operacja. O ile nie profilujesz go w celu wskazania, że ​​czas zapytania rośnie wraz z liczbą elementów na stronie, lub jeśli nie rozumiesz kodu źródłowego przeglądarki, nie możesz tego stwierdzić.
am

144

Możesz uzyskać wartość, używając checkedwłaściwości.

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
Biorąc pod uwagę, że można sprawdzić tylko jedno radio, normalnie oczekiwałbym, że instrukcja breaklub returninstrukcja wewnątrz ifbloku zatrzyma dodatkowe przejścia przez pętlę. Drobna uwaga, ale dobry styl.
RobP

1
To najczystsza implementacja wanilii dla tego pytania. Sława!
SeaWarrior404

37

Dla was, ludzi żyjących na krawędzi:

Jest teraz coś o nazwie RadioNodeList, a dostęp do jego właściwości value zwróci wartość aktualnie sprawdzanego wejścia. To wyeliminuje konieczność pierwszego odfiltrowania „zaznaczonego” wejścia, jak widzimy w wielu opublikowanych odpowiedziach.

Przykładowy formularz

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

Aby pobrać sprawdzoną wartość, możesz zrobić coś takiego:

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

JSFiddle to udowodnić: http://jsfiddle.net/vjop5xtq/

Uwaga: zostało to zaimplementowane w przeglądarce Firefox 33 (wydaje się, że obsługuje to wszystkie inne główne przeglądarki). Starsze przeglądarki będą wymagać polfyill, aby działało RadioNodeListto poprawnie


1
form.elements["test"].valuedziała bardzo dobrze w Chrome [wersja 49.0.2623.87 m].
Evan Hu

To musi być forma, nie można użyć np. Div. W przeciwnym razie działa to w FF 71.0.
Andrew

16

Ten, który pracował dla mnie, jest podany poniżej z 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()

Zmienna selectedOption będzie zawierać wartość wybranego przycisku opcji (tj.) O1 lub o2


11

Inną (najwyraźniej starszą) opcją jest użycie formatu: „document.nameOfTheForm.nameOfTheInput.value;” np. 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>

Możesz odwołać się do elementu po jego nazwie w formularzu. Twój oryginalny kod HTML nie zawiera jednak elementu formularza.

Fiddle tutaj (działa w Chrome i Firefox): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/


1
Jest to znacznie starszy, starszy format DOM i naprawdę nie powinien być już używany, ponieważ jest ograniczony do niektórych elementów i nie dotrzymuje kroku obecnym standardom.
j08691

@ j08691 Ach, dobrze, dziękuję za poinformowanie mnie. To jedna z rzeczy, których nauczyłem się na zajęciach uniwersyteckich. Prawdopodobnie lepiej nie ufać stamtąd i po prostu korzystać z referencji online.
JHS

6
„... nie dotrzymuje kroku obecnym standardom”. nie jest przekonującym argumentem. Proszę opracować. Jeśli to działa, to działa. Jest to również mniej wierszy niż zaakceptowana odpowiedź, która określa tylko, czy wybrana opcja to „Stała stawka”.
zera i

Powyższe skrzypce nie działa w przeglądarce Safari (7.1.4). Wartość jest wyświetlana jako niezdefiniowana, zmiana stanów przycisku opcji nie ma na to wpływu.
Stuart R. Jefferys

Tak, to również nie działa z przeglądarką Edge (40.15063.0.0). Jeśli przestały działać w ten sposób, wydaje się to dziwne, ponieważ jest to prostsze i ma sens, ponieważ przyciski opcji są pogrupowane według ich natury. Większość pozostałych odpowiedzi wygląda tak, jakby zaznaczały pola wyboru.
mikato

10

Użyj document.querySelector ('input [type = radio]: zaznaczone'). Value; aby uzyskać wartość zaznaczonego pola wyboru, możesz użyć innych atrybutów, aby uzyskać wartość, np. imię = płeć itp. Przejdź poniżej fragmentu kodu, na pewno będzie to pomocne,

Rozwiązanie

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>

Dziękuję Ci


7

KOD HTML:

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

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

Dostaniesz

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

5

W JavaScript możemy uzyskać wartości, używając identyfikatorów „ getElementById()” w powyższym kodzie, który opublikowałeś ma nazwę inną niż Id, więc możesz zmodyfikować w ten sposób

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

użyj tej stawki_wartości zgodnie z Twoim kodem


5

Minął rok od pytania, ale myślałem, że znaczna poprawa odpowiedzi była możliwa. Uważam to za najłatwiejszy i najbardziej wszechstronny skrypt, ponieważ sprawdza, czy przycisk został sprawdzony, a jeśli tak, to jaka jest jego wartość:

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

Możesz także wywołać funkcję w ramach innej funkcji, na przykład:

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

5

Zakładając, że do twojego elementu formularza odwołuje się myFormzmienna poniżej, i że twoje przyciski opcji mają wspólną nazwę „my-radio-button-group-name”, poniższy kod jest zgodny ze standardem JavaScript i standardami (chociaż nie sprawdziłem, aby był dostępny wszędzie ):

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

Powyższe da wartość zaznaczonego (lub wybranego, jak to się nazywa) elementu przycisku opcji, jeśli taki istnieje, lub w nullinny sposób. Istotą tego rozwiązania jest namedItemfunkcja, która działa szczególnie z przyciskami radiowymi.

Zobacz HTMLFormElement.elements , HTMLFormControlsCollection.namedItem, a zwłaszcza RadioNodeList.value , ponieważ namedItem zwykle zwraca RadioNodeListobiekt.

Korzystam z MDN, ponieważ pozwala to śledzić zgodność standardów, przynajmniej w dużym stopniu, i ponieważ jest łatwiejszy do zrozumienia niż wiele publikacji WhatWG i W3C.


Kiedy napisałem odpowiedź, przejrzałem istniejące odpowiedzi i nie zobaczyłem niczego, co przypominałoby to, co chciałem się podzielić. Teraz widzę, że przegapiłem przynajmniej dwa podobne rozwiązania. Chociaż nikt nie napisał sugestii kodu przy użyciu konkretnej składni, którą stosuję, ale ogólna idea jest taka sama. Do Twojej wiadomości Chodzi o to, aby uzyskać odniesienie do a RadioNodeListpoprzez coś takiego form.elements[name]lub form[name](być może spekulację) lub poprzez moją powyższą składnię.
rano

3

wielokrotne bezpośrednie naciśnięcie przycisku opcji daje wartość PIERWSZEGO przycisku, a nie przycisku SPRAWDZONEGO. zamiast zapętlać przyciski radiowe, aby sprawdzić, który jest zaznaczony, wolę wywołać funkcję onclickjavascript, która ustawia zmienną, którą można później dowolnie pobrać.

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

który wzywa:

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

dodatkową zaletą jest to, że mogę przetwarzać dane i / lub reagować na sprawdzenie przycisku (w tym przypadku włączenie przycisku SUBMIT).


5
onchangezamiast tego powinieneś powiązać zdarzenie, w przypadku gdy użytkownik używa klawiatury.
John Dvorak,

2

Ulepszenie poprzednich sugerowanych funkcji:

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

Podchodzę do tego problemu z czystym javascript, aby znaleźć zaznaczony węzeł, znaleźć jego wartość i wyskoczyć z tablicy.

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

Zauważ, że używam funkcji strzałek . Zobacz ten skrzypce jako działający przykład.


Dodałbym tagName === 'INPUT'sprawdzenie, aby upewnić się, że nie pracujesz nad tagami innymi niż input.
Aternus


1

Możesz użyć, .find()aby zaznaczyć zaznaczony element:

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

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

1
Nie znałem Array.find, uwielbiam to! Ale to by się zepsuło, gdyby żaden element nie został sprawdzony.
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>

następnie...

var rate_value = rates.rate.value;

Czy możesz wyjaśnić, jak to odpowiada na pytanie?
brzmi jakodd

pobierz wybraną wartość z grupy przycisków opcji ”: rates.rate.valuenotrates.value
user7420100

To poprawna odpowiedź. document.getElementById("rates").rate.value[lub]document.forms[0].rate.value
Atika

0

sprawdź wartość według ID:

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

0

Użyłem funkcji jQuery.click, aby uzyskać pożądany wynik:

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

Mam nadzieję, że to pomoże.


0

Jeśli przyciski mają postać
var myform = new FormData(getformbywhatever); myform.get("rate");
powyżej, QuerySelector jest lepszym rozwiązaniem. Jednak ta metoda jest łatwa do zrozumienia, szczególnie jeśli nie masz pojęcia o CSS. Poza tym pola wejściowe i tak prawdopodobnie mają formę.
Nie sprawdziłem, istnieją inne podobne rozwiązania, przepraszam za powtórzenie


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

zamiast tego nie można uzyskać wartości takiego przycisku opcji

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

aby uzyskać wartości znacznika HTML, użyj document.getElementById ('r1'). innerHtml
James Cluade

0

Jeśli używasz JQuery, użyj poniżej fragmentu dla grupy przycisków opcji.

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

0

Po prostu użyj: document.querySelector('input[rate][checked]').value


Nie działało dla mnie; zobacz podobną składnię powyżej z Pawana, który to zrobił. Jak w,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

Możesz także zapętlać przyciski za pomocą pętli forEach na elementach

    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

W PHP jest to bardzo prosta
strona HTML

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

Weź wartość z formy do php

$radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.