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


265

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

Ответы:


395

Вы можете сделать что-то вроде этого:

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;
  }
}
<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

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


5
Это работало для jquery 1.7, но теперь правильный синтаксис для jQuery 1.9 - это $ ('input [name = "sexS"]: флажок'). Val (); (удалить @)
jptsetung

1
Я считаю, что @синтаксис устарел даже раньше, чем это (JQuery 1.2)
Том Пьетросанти

@ TomPietrosanti документация, кажется, немного не так, jsfiddle.net/Xxxd3/608 работает в <1.7.2, но не в> 1.8.3. Независимо от @этого, безусловно, должны быть удалены
JBabey

Да, похоже, что они оставили некоторую обратную совместимость, но не обновили документы, чтобы они соответствовали. Я помню некоторую шумиху, когда они отбрасывали некоторые устаревшие функции, которые все еще широко использовались, поэтому они добавили поддержку обратно. Может быть, именно поэтому ...
Том Пьетросанти

2
document.querySelector()Вероятно, сейчас следует рекомендовать подход в JavaScript.
Дейв

338

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

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

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


23
Использование document.querySelector () - чистый ответ на языке javascript: developer.mozilla.org/en-US/docs/Web/API/document.querySelector
AdamJonR

8
Если вы храните его в переменной и не выбрана радиокнопка, браузер останавливается. Консоль говорит: TypeError document.querySelector(...)есть null.
позвони мне

14
Это работает только если один выбран. Так что вы должны проверить это раньше. var selector = document.querySelector('input[name="genderS"]:checked'); if(selector) console.log(selector.value);
Маркус Целлер

Я работаю с шаблонами в Метеоре, и этот :checkedтрюк полностью прибил его для меня ... для меня исправление чтения радиокнопок из формы шаблона Метеор былоaccountType = template.find("[name='optradio']:checked").value;
zipzit

У меня есть одна корпоративная среда, в которой она не работает согласованно в IE11 - какой-то режим обратной совместимости.
Стив Блэк,

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

5
Это тоже работает:document.forms.your-form-name.name-shared-by-radio-buttons.value
Web_Designer

7
Я думаю, что большинство людей не замечают этого. Принятый ответ работает. Гиоргос Цаконас ответ лучше. Но этот - в корне правильный ответ. Вот как на самом деле работают переключатели. Обратите внимание, что если ничего не было выбрано, возвращается пустая строка.
Марк Голдфейн

@Web_Designer Если ваш комментарий также не будет реальным ответом?
Идеограмма

Это не работает, если ваш радиовход не в форме, поэтому я не думаю, что это лучший ответ, чем запрос querySelector, возможно, эти два следует объединить.
Томаш Хюбельбауэр

этот способ не работает, если ваши радио находятся внутри меток
Игорь Фоменко

19

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

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

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



16

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

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

1
За проголосовали по двум причинам: 1. это работает. 2. Это не был неудачный ответ на JQuery.
Джон

21
Это точная копия ответа @Giorgos Tsakonas выше, который был дан годом ранее.
T Nguyen

7

Попробуй это

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

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


eval здесь не лучший вариант ... вы можете сказать var sizes = document.theForm[field];и удалить первое присваивание, поэтому больше не используйте testпеременную.
Деннис

Насколько мне известно, будет ли Eval работать как есть? Или это будет работать только с eval('var sizes=document.theForm.' + field)?
Майкл Лаффарг

утверждение eval в вашем ответе var sizes = eval(test);будет работать таким образом (я просто проверяю его в firebug).
Деннис

Это имеет больше смысла, но я получаю сообщение об ошибке «Неожиданный токен [» в той строке, где я поставил fieldскобки. Есть предположения, почему?
mkyong

4

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

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

Код ломается так:

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

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



3

Вот пример для радио, где не используется атрибут 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");
   }    
}

ДЕМО : http://jsfiddle.net/ipsjolly/hgdWp/2/ [ Нажмите «Найти», не выбирая радио » ]

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


2

Вот хороший способ получить значение отмеченного переключателя с помощью простого JavaScript:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

Источник: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

Используя этот HTML:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

Вы также можете использовать Array Find the checkedproperty, чтобы найти отмеченный элемент:

Array.from(form.elements.characters).find(radio => radio.checked);

1

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

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

1

Предположим, вам нужно разместить в форме разные строки переключателей, каждый из которых имеет отдельные имена атрибутов ('option1', 'option2' и т. д.), но одно и то же имя класса. Возможно, они вам нужны в нескольких строках, где каждая из них будет отправлять значение по шкале от 1 до 5, относящейся к вопросу. Вы можете написать свой JavaScript следующим образом:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

Я также вставил бы окончательный вывод в скрытый элемент формы, который будет отправлен вместе с формой.



0

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.