it-swarm.com.ru

Как получить значение выбранного радиокнопки?

Я посмотрел везде и попробовал все, чтобы получить выбранное значение из группы переключателей. 

Вот мой 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>

Вот мой .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;

Я продолжаю становиться неопределенным.

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

Элемент ставок является div, поэтому он не будет иметь значения. Это, вероятно, откуда undefined приходит.

Свойство checked сообщит вам, выбран ли элемент:

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

Это работает в IE9 и выше и во всех других браузерах.

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

Вы можете получить значение, используя свойство checked.

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

Для вас, людей, живущих на краю:

Теперь есть нечто, называемое RadioNodeList , и доступ к его свойству значения вернет значение проверенного в данный момент ввода. Это избавит от необходимости сначала отфильтровывать «проверенные» входные данные, как мы видим во многих опубликованных ответах. 

Пример формы

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

Чтобы получить проверенное значение, вы можете сделать что-то вроде этого:

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

JSFiddle, чтобы доказать это: http://jsfiddle.net/vjop5xtq/

Обратите внимание, что это было реализовано в Firefox 33 (кажется, что все другие основные браузеры поддерживают его). Более старые браузеры потребуют polfyill для RadioNodeList для того, чтобы это правильно функционировало

25
Daniel

Тот, который работал для меня, дан ниже от 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()

Переменная selectedOption будет содержать значение выбранной радиокнопки (т.е. o1 или o2).

9
Malathy

Другой (очевидно, более старый) вариант - использовать формат: "Document.nameOfTheForm.nameOfTheInput.value;" Например. 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>

Вы можете ссылаться на элемент по его имени в форме. Ваш оригинальный HTML не содержит элемента формы.

Скрипка здесь (работает в Chrome и Firefox): https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

9
JHS

Прошел год или около того с тех пор, как вопрос был задан, но я подумал, что возможно существенное улучшение ответов. Я считаю, что это самый простой и универсальный скрипт, потому что он проверяет, была ли кнопка проверена, и если да, каково ее значение: 

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

Вы также можете вызвать функцию в другой функции, например так: 

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

Предполагая, что на элемент формы ссылается переменная myForm ниже, и что ваши радиокнопки имеют имя «my-radio-button-group-name», следующее является чисто JavaScript и совместимым со стандартами (хотя я не проверял, чтобы он был доступен везде):

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

Вышеприведенное приведет к значению элемента переключателя checked (или выбранного, как его еще называют) элемента, если он есть, или null в противном случае. Суть решения - функция namedItem, которая работает именно с переключателями.

См. HTMLFormElement.elements , HTMLFormControlsCollection.namedItem и особенно RadioNodeList.value , так как namedItemобычно возвращает объект RadioNodeList.

Я использую MDN, потому что он позволяет отслеживать соответствие стандартам, по крайней мере, в значительной степени, и потому, что его легче понять, чем многие публикации WhatWG и W3C.

4
amn

Используйте document.querySelector ('input [type = radio]: флажок'). Value; чтобы получить значение выбранного флажка, вы можете использовать другие атрибуты для получения значения, такие как имя = пол и т. д., пожалуйста, пройдите ниже фрагмента определенно это будет полезно для вас,  

Решение

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>

Благодарю вас

4
pawan vedak

В Javascript мы можем получить значения с помощью идентификатора "getElementById()" в вышеприведенном коде, который вы разместили, содержит имя, а не Id Поэтому вы можете изменить его следующим образом

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

используйте это значение в соответствии с вашим кодом

4
pradeep

HTML-код:

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

КОД 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"/>

Ты получишь

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

прямой вызов радиокнопки много раз дает вам значение кнопки FIRST, а не кнопки CHECKED. вместо того, чтобы переключаться между переключателями, чтобы увидеть, какая из них отмечена, я предпочитаю вызывать функцию onclick javascript, которая устанавливает переменную, которую позже можно будет получить по желанию.

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

который звонит:

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

дополнительным преимуществом является то, что я могу обрабатывать данные и/или реагировать на проверку кнопки (в этом случае включение кнопки SUBMIT).

3
tony gil

Улучшение предыдущих предложенных функций:

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
Dave

Вы можете использовать .find(), чтобы выбрать проверенный элемент:

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

var value = radio.length && radio.find(r => r.checked).value
1
Yukulélé

Просто используйте: document.querySelector('input[rate][checked]').value

1
mahdavipanah

Если вы используете jQuery:

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

1
Senthil Kumar Thangavel

Мое решение этой проблемы с чистым JavaScript состоит в том, чтобы найти проверенный узел, найти его значение и вытащить его из массива.

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

Обратите внимание, что я использую функции стрелки . Смотрите этот fiddle для рабочего примера.

1
pongi

   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
Bishnu Kumar Roy

Если вы используете JQuery, используйте приведенный ниже фрагмент для группы переключателей.

var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();
0
Surendra K
<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>

затем...

var rate_value = rates.rate.value;
0
user7420100

Я использовал функцию jQuery.click для получения желаемого результата:

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

Надеюсь, поможет.

0
Animesh Singh

Если кнопки в форме
var myform = new FormData(getformbywhatever); myform.get("rate");
QuerySelector выше - лучшее решение. Тем не менее, этот метод легко понять, особенно если у вас нет понятия о CSS. Кроме того, поля ввода, скорее всего, будут в форме в любом случае.
Не проверял, есть другие похожие решения, извините за повторение

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

не может получить значения радио-кнопки, как это вместо использования

rate_value = document.getElementById('r1').value;
0
James Cluade

проверить значение по ID:

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

В php это очень просто
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">

Принять значение от формы до php

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