Как получить значение выбранного переключателя? - PullRequest
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 ]

3 голосов
/ 31 марта 2016
 document.querySelector('input[name=genderS]:checked').value
2 голосов
/ 22 января 2013

Вот пример для радио, где не используется атрибут Проверено = "проверено"

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

1 голос
/ 22 января 2018

позволяет предположить, что вам нужно поместить различные строки переключателей в форму, каждый с отдельными именами атрибутов ('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>

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

1 голос
/ 21 мая 2015

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

function (event) {
    console.log(event.target.value);
}
0 голосов
/ 13 апреля 2013
    var value = $('input:radio[name="radiogroupname"]:checked').val();
0 голосов
/ 24 ноября 2017

Если вы можете назначить 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">
0 голосов
/ 20 октября 2015
 <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();
...