Как получить значение выбранного переключателя? - PullRequest
Новая
       24

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

218 голосов
/ 08 марта 2012

У меня странная проблема с моей программой 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>

Ответы [ 17 ]

361 голосов
/ 08 марта 2012

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 за ваши предложения по редактированию.

218 голосов
/ 22 июля 2014

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

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

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

19 голосов
/ 29 января 2013 
document.forms.your-form-name.elements.radio-button-name.value
16 голосов
/ 22 мая 2015

Самое простое решение: 

 document.querySelector('input[name=genderS]:checked').value
16 голосов
/ 04 июня 2013

Начиная с jQuery 1.8, правильный синтаксис для запроса: 

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

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

14 голосов
/ 08 декабря 2016

ECMAScript 6 версия 

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;
7 голосов
/ 08 марта 2012

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

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 голосов
/ 08 марта 2012

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

var sizes = document.theForm[field];

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

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

Разве тебе не eval это нравится? 

var sizes = eval(test);

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

4 голосов
/ 14 ноября 2016

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

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

или проще: 

alert(document.theForm.genderS.value);

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

3 голосов
/ 23 августа 2015

Это чистый 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 находит элемент управления, и нуль / фальси, если нет.

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

Страница:
...