Estou tendo algum problema estranho com meu programa JS. Eu tive isso funcionando corretamente, mas por algum motivo não está mais funcionando. Eu só quero encontrar o valor do botão de opção (qual deles está selecionado) e devolvê-lo a uma variável. Por alguma razão, ele continua voltando undefined.

Aqui está o meu código:

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>

Você pode fazer algo assim:

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

Editar: Obrigado HATCHA e jpsetung por suas sugestões de edição.

Isso funciona com qualquer explorador.

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

Essa é uma maneira simples de obter o valor de qualquer tipo de entrada. Você também não precisa incluir o caminho do jQuery.

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

Desde o jQuery 1.8, a sintaxe correta para a consulta é

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

Não é $('input[@name="genderS"]:checked').val();mais, que estava funcionando no jQuery 1.7 (com o @ ).

Versão ECMAScript 6

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

A solução mais simples:

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

Tente isto

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

Um violino aqui .

Edit: Como dito por Chips_100, você deve usar:

var sizes = document.theForm[field];

diretamente sem usar a variável de teste.

Resposta antiga:

Você não deveria evalgostar disso?

var sizes = eval(test);

Não sei como isso funciona, mas para mim você está apenas copiando uma string.

Isso é JavaScript puro, com base na resposta de @Fontas, mas com código de segurança para retornar uma string vazia (e evitar a TypeError) se não houver um botão de opção selecionado:

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

O código se divide assim:

• Linha 1: obtenha uma referência ao controle de que (a) é um <input>tipo, (b) possui um nameatributo de genderSe (c) está marcado.
• Linha 2: se houver esse controle, retorne seu valor. Se não houver, retorne uma string vazia. A genderSRadiovariável é verdadeira se a Linha 1 encontra o controle e null / falsey, se não encontrar.

Para o JQuery, use a resposta de @ jbabey e observe que, se não houver um botão de opção selecionado, ele retornará undefined.

Caso alguém esteja procurando uma resposta e tenha chegado aqui como eu, no Chrome 34 e Firefox 33, você pode fazer o seguinte:

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

ou mais simples:

alert(document.theForm.genderS.value);

referência: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Aqui está um exemplo para rádios em que nenhum atributo Checked = "selected" é usado

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/ [ Clique em Localizar sem selecionar nenhum rádio ]

Fonte: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

Aqui está uma boa maneira de obter o valor do botão de opção verificado com JavaScript simples:

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

Fonte: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

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

Você também pode usar o Array Find a checkedpropriedade para encontrar o item marcado:

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

Usando um javascript puro, você pode manipular a referência ao objeto que despachou o evento.

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

vamos supor que você precise colocar diferentes linhas de botões de opção em um formulário, cada um com nomes de atributos separados ('opção1', 'opção2' etc), mas com o mesmo nome de classe. Talvez você precise deles em várias linhas, onde cada um deles enviará um valor com base em uma escala de 1 a 5, referente a uma pergunta. você pode escrever seu javascript da seguinte forma:

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

Também inseriria a saída final em um elemento oculto do formulário a ser enviado junto com o formulário.

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

Se for possível atribuir um ID para o elemento do formulário (), essa maneira poderá ser considerada uma maneira alternativa segura (especialmente quando o nome do elemento do grupo de rádio não for exclusivo no documento):

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

etc então use apenas

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

Ou

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

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