Como obter o valor do botão de opção selecionado?


265

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>

Respostas:


395

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.


5
Isso estava funcionando para o jquery 1.7, mas agora a sintaxe correta para o jQuery 1.9 é $ ('input [name = "genderS"]: verificado'). Val (); (remove the @)
jptsetung

1
Eu acredito que a @sintaxe foi preterido ainda mais cedo do que isso (jQuery 1.2)
Tom Pietrosanti

@ TomPietrosanti, a documentação parece um pouco complicada, jsfiddle.net/Xxxd3/608 funciona em <1.7.2, mas não em> 1.8.3. Independentemente disso, o @definitivamente deve ser removido
jbabey

Sim, parece que eles deixaram alguma compatibilidade com versões anteriores, mas não atualizaram os documentos para corresponder. Lembro-me de alguma comoção quando caíram alguns recursos obsoletos que ainda eram amplamente em uso, para que eles adicionaram suporte de volta em Talvez seja por isso ....
Tom Pietrosanti

2
document.querySelector()provavelmente deve ser a abordagem recomendada em JavaScript direto agora.
Dave

338

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.


23
O uso de document.querySelector () é uma resposta javascript pura: developer.mozilla.org/pt-BR/docs/Web/API/document.querySelector
AdamJonR

8
Se você armazená-lo em uma variável e nenhum botão de opção estiver selecionado, o navegador será interrompido. O console diz: TypeError document.querySelector(...)is null.
ligue-me

14
Isso só funciona se um estiver selecionado. Então você deve verificar isso antes. var selector = document.querySelector('input[name="genderS"]:checked'); if(selector) console.log(selector.value);
Markus Zeller

Eu estou trabalhando com modelos em Meteor, e que :checkedtruque totalmente acertou em cheio para mim .. para mim a correção para ler botões de rádio a partir de um formulário Modelo de Meteor foiaccountType = template.find("[name='optradio']:checked").value;
zipzit

Eu tenho um ambiente corporativo em que ele não funciona consistentemente no IE11 - algum tipo de modo de compatibilidade com versões anteriores.
Steve Black

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

5
Isso também funciona:document.forms.your-form-name.name-shared-by-radio-buttons.value
Web_Designer 25/11/2015

7
Eu acho que a maioria das pessoas está ignorando isso. A resposta aceita funciona. A resposta de Giorgos Tsakonas é melhor. Mas esta é a resposta fundamentalmente correta. Este é como os botões de opção realmente funcionam. Observe que, se nada tiver sido selecionado, ele retornará uma string vazia.
22818 Mark Goldfain

@Web_Designer Seu comentário também não deve ser uma resposta real?
Ideograma

Isso não funciona se a entrada de rádio não estiver em um formulário, por isso não acho que seja uma resposta melhor que a querySelector, talvez essas duas devam ser mescladas.
Tomáš Hübelbauer 03/06

dessa maneira não funcionará se seus rádios estiverem dentro de etiquetas
Igor Fomenko

19

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 @ ).


16

Versão ECMAScript 6

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

16

A solução mais simples:

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

1
Votado por duas razões: 1. funciona. 2. não foi uma resposta de jquery esfarrapada.
John John

21
Esta é uma cópia exata da resposta de @Giorgos Tsakonas acima, que foi dada um ano antes.
T Nguyen

7

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 .


6

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.


eval não é a melhor opção aqui ... você pode querer dizer var sizes = document.theForm[field];e excluir a primeira tarefa, para não usar testmais a variável.
Dennis

Pelo meu conhecimento, eval funcionaria como está? Ou funcionaria apenas com eval('var sizes=document.theForm.' + field)?
Michael Laffargue

a declaração eval em sua resposta var sizes = eval(test);funcionaria dessa maneira (eu apenas a testo no firebug).
Dennis

Isso faz mais sentido, mas estou recebendo o erro "Token inesperado [" nessa linha em que coloquei fieldcolchetes. Algum palpite sobre o porquê?
mkyong 8/03/12

4

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.



3

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


2

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

1

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

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

1

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.


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

0

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

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

etc então use apenas

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

Ou

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.