Получить значение кнопки радио с помощью Javascript

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

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

SubmitForm:

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

HTML:

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>

Ответ 1

JavaScript:

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++)
{
 if (radios[i].checked)
 {
  // do whatever you want with the checked radio
  alert(radios[i].value);

  // only one radio can be logically checked, don't check the rest
  break;
 }
}

http://jsfiddle.net/Xxxd3/610/

Изменить: Спасибо HATCHA и jpsetung за ваши предложения по редактированию.

Ответ 2

Это работает с любым проводником.

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

Это самый чистый способ получить значение любого типа ввода. Вам также не нужно включать jQuery в свой путь.

Ответ 3

Поскольку jQuery 1.8, правильный синтаксис для запроса -

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

Не $('input[@name="genderS"]:checked').val();, который работал в jQuery 1.7 (с @).

Ответ 4

Простейшее решение:

 document.querySelector('input[name=genderS]:checked').value

Ответ 5

Попробуйте это

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

Скрипт здесь.

Ответ 6

Изменить: Как сказано в Chips_100, вы должны использовать:

var sizes = document.theForm[field];

непосредственно без использования тестовой переменной.


Старый ответ:

Разве вам не нравится eval?

var sizes = eval(test);

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

Ответ 7

document.forms.your-form-name.elements.radio-button-name.value

Ответ 8

Версия ECMAScript 6

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;

Ответ 9

Вот пример для радиостанций, где не используется атрибут Checked = "checked"

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

DEMO: http://jsfiddle.net/ipsjolly/hgdWp/2/ [ Нажмите "Найти", не выбрав любое радио]

Источник: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

Ответ 10

Это чистый JavaScript, основанный на ответе @Fontas, но с кодом безопасности, который возвращает пустую строку (и избегает TypeError), если нет выбранного переключателя:

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

Код разбивается следующим образом:

  • Строка 1: получите ссылку на элемент управления, который (a) является типом <input>, (b) имеет атрибут name genderS и (c).
  • Строка 2: Если есть такой элемент управления, верните его значение. Если нет, верните пустую строку. Переменная genderSRadio правдива, если строка 1 обнаруживает элемент управления и имеет значение null/false, если это не так.

Для JQuery используйте ответ @jbabey и обратите внимание, что если нет выбранного переключателя, он вернет undefined.

Ответ 11

 document.querySelector('input[name=genderS]:checked').value

Ответ 12

Если кто-то искал ответ и приземлился здесь, как я, из Chrome 34 и Firefox 33 вы можете сделать следующее:

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

или проще:

alert(document.theForm.genderS.value);

refrence: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Ответ 13

Используя чистый javascript, вы можете обрабатывать ссылку на объект, отправивший событие.

function (event) {
    console.log(event.target.value);
}

Ответ 14

Если вы можете назначить Id для своего элемента form(), этот способ можно рассматривать как безопасный альтернативный способ (особенно когда имя элемента группы радио не уникально в документе):

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML:

<form action="#n" name="theForm" id="yourFormId">

Ответ 15

 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

и т.д., тогда используйте только

  $("#rdbExamples:checked").val()

или

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

Ответ 16

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