Mam dziwny problem z moim programem JS. Miałem to działało poprawnie, ale z jakiegoś powodu to już nie działa. Chcę tylko znaleźć wartość przycisku opcji (który jest wybrany) i zwrócić go do zmiennej. Z jakiegoś powodu powraca undefined.

Oto mój kod:

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>

Możesz zrobić coś takiego:

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

Edycja: Dzięki HATCHA i jpsetung za sugestie dotyczące edycji.

Działa to z każdym odkrywcą.

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

Jest to prosty sposób na uzyskanie wartości dowolnego typu danych wejściowych. Ty też nie , nie muszą zawierać ścieżkę jQuery.

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

Od jQuery 1.8 poprawna składnia zapytania jest następująca

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

Już $('input[@name="genderS"]:checked').val();nie, który działał w jQuery 1.7 (z @ ).

Wersja ECMAScript 6

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

Najprostsze rozwiązanie:

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

Spróbuj tego

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

Skrzypce tutaj .

Edycja: Jak powiedział Chips_100, powinieneś użyć:

var sizes = document.theForm[field];

bezpośrednio, bez użycia zmiennej testowej.

Stara odpowiedź:

Nie powinieneś tego evallubić?

var sizes = eval(test);

Nie wiem, jak to działa, ale dla mnie kopiujesz tylko ciąg znaków.

To jest czysty JavaScript, oparty na odpowiedzi @Fontas, ale z kodem bezpieczeństwa, aby zwrócić pusty ciąg (i uniknąć a TypeError), jeśli nie ma wybranego przycisku opcji:

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

Kod rozkłada się w następujący sposób:

• Wiersz 1: uzyskaj odniesienie do formantu, który (a) jest <input>typem, (b) ma nameatrybut genderS, a (c) jest zaznaczone.
• Wiersz 2: Jeśli istnieje taka kontrola, zwróć jej wartość. Jeśli nie, zwróć pusty ciąg. genderSRadioZmienna jest truthy jeśli linia 1 znaleziska kontroli i / null falsey czy nie.

W przypadku JQuery użyj odpowiedzi @ jbabey i zwróć uwagę, że jeśli nie ma wybranego przycisku opcji, nastąpi powrót undefined.

Na wypadek, gdyby ktoś szukał odpowiedzi i wylądował tutaj tak jak ja, z Chrome 34 i Firefox 33 możesz wykonać następujące czynności:

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

lub prościej:

alert(document.theForm.genderS.value);

odwołanie: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Oto przykład radia, w którym nie użyto atrybutu Checked = "selected"

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/ [ Kliknij Znajdź bez wybierania radia ]

Źródło: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

Oto dobry sposób na uzyskanie wartości zaznaczonego przycisku opcji za pomocą zwykłego 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);

Źródło: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

Za pomocą tego 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>

Można także użyć Array Znajdź na checkedwłasność, aby znaleźć sprawdzany przedmiot:

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

Za pomocą czystego javascript można obsłużyć odwołanie do obiektu, który wywołał zdarzenie.

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

załóżmy, że musisz umieścić różne wiersze przycisków opcji w formularzu, każdy z osobnymi nazwami atrybutów („opcja1”, „opcja2” itp.), ale o tej samej nazwie klasy. Być może potrzebujesz ich w wielu wierszach, z których każdy poda wartość na podstawie skali od 1 do 5 dotyczącej pytania. możesz napisać javascript w następujący sposób:

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

Wstawiłbym również końcowy wynik do ukrytego elementu formularza, który należy przesłać wraz z formularzem.

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

Jeśli możliwe jest przypisanie identyfikatora do elementu formularza (), ten sposób można uznać za bezpieczny alternatywny sposób (szczególnie gdy nazwa elementu grupy radiowej nie jest unikalna w dokumencie):

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

itd., a następnie użyj just

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

Lub

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

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