У мене є якась дивна проблема з моєю програмою 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>

Ви можете зробити щось подібне:

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 за ваші пропозиції щодо редагування.

Це працює з будь-яким дослідником.

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

Це простий спосіб отримати значення будь-якого типу введення. Вам також не потрібно включати шлях до jQuery.

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

Оскільки jQuery 1.8, правильний синтаксис запиту є

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

Чи не $('input[@name="genderS"]:checked').val();більше, який працював в JQuery 1.7 (з @ ).

Версія ECMAScript 6

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

Найпростіше рішення:

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

Спробуйте це

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

Скрипку тут .

Редагувати: За словами Chips_100, ви повинні використовувати:

var sizes = document.theForm[field];

безпосередньо без використання тестової змінної.

Стара відповідь:

Вам evalце не сподобається?

var sizes = eval(test);

Я не знаю, як це працює, але для мене ти лише копіюєш рядок.

Це чистий 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Мінлива truthy якщо лінія 1 знахідки контролю і нуль / falsey , якщо він не робить.

Для JQuery використовуйте відповідь @ jbabey і зауважте, що якщо немає вибраної радіо кнопки, вона повернеться undefined.

Якщо хтось шукав відповідь і приземлився тут, як я, з 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

Ось приклад радіостанцій, де не використовується атрибут 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-cont-radio-value-in.html

Ось хороший спосіб отримати значення перевіреного перемикача за допомогою простого 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- 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 checkedProperties, щоб знайти зареєстрований товар:

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

Використовуючи чистий javascript, ви можете обробити посилання на об’єкт, який пересилав подію.

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

припустимо, вам потрібно розмістити різні рядки радіо кнопок у формі, кожен з яких має окремі імена атрибутів ('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>

Я б також вставив кінцевий результат у прихований елемент форми, який слід подати разом із формою.

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

Якщо вам можливо призначити ідентифікатор для елемента форми (), цей спосіб може розглядатися як безпечний альтернативний спосіб (особливо, коли назва елемента радіогрупи не є унікальним у документі):

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

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

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