Como posso saber qual botão de opção está selecionado via jQuery?


2707

Eu tenho dois botões de opção e quero postar o valor do selecionado. Como posso obter o valor com o jQuery?

Eu posso obter todos eles assim:

$("form :radio")

Como sei qual é selecionado?

Respostas:


3936

Para obter o valor do item selecionado radioName de um formulário com o ID myForm:

$('input[name=radioName]:checked', '#myForm').val()

Aqui está um exemplo:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>


306
Acabei usando o seguinte: $ ('form input [type = radio]: selected') #
307 juan

46
@ PeterJ: Por que você usou dois argumentos em vez de simplesmente '#myform input[name=radioName]:checked'?
Sophie Alpert

145
O jQuery tem melhor desempenho quando definido corretamente no escopo e a seleção por ID é sempre o seletor de melhor desempenho. O método de dois argumentos é simplesmente outra maneira de fazê-lo.
12139 Peter J

40
Para obter o melhor desempenho, a documentação recomenda não usar o seletor de rádio :. api.jquery.com/radio-selector
Peter J

2
Alternativo: $ ('. ClassName: selected');
Meetai.com

410

Usa isto..

$("#myform input[type='radio']:checked").val();

64
Se o seu formulário tiver vários conjuntos de botões de opção, isso só terá o valor do primeiro conjunto, eu acho.
21312 Brad

3
Isso retornará apenas o valor do primeiro botão de opção marcado no formulário. Isso deve ser feito da maneira que Peter J. sugeriu.
MickJ

3
@MickJ Esse trecho de código é o mesmo de Peter J ... Considerando o caso de uso da pergunta original. No entanto, se você tiver vários grupos de botões de opção, ele não funcionará. Isso é porque é pro melhor uso [name = selector]
Lyth

1
Como o @Brad mencionou, isso só obterá o valor do primeiro conjunto. O que você deseja é substituir ".val ()" por ".map (function () {return this.value;}). Get ();"
AM_

1
Por que vale a pena, (sim eu sei otimizar antes precisava blá blá), mas para o desempenho puro funciona este mais rápido, especialmente em navegadores mais antigos:$("#myform").find("input[type='radio']:checked").val();
Mark Schultheiss

307

Se você já tem uma referência a um grupo de botões de opção, por exemplo:

var myRadio = $("input[name=myRadio]");

Use a filter()função, não find(). ( find()é para localizar elementos filho / descendente, enquanto filter()pesquisa elementos de nível superior em sua seleção.)

var checkedValue = myRadio.filter(":checked").val();

Notas: Esta resposta estava originalmente corrigindo outra resposta recomendada find(), que parece ter sido alterada. find()ainda pode ser útil para a situação em que você já tinha uma referência a um elemento de contêiner, mas não aos botões de opção, por exemplo:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

7
Eu só queria acrescentar, por uma questão de clareza, que find () realmente pesquisa todos os elementos descendentes (que correspondem ao seletor fornecido). Se você deseja apenas filhos diretos, use children ().
Matt Brown

139

Isso deve funcionar:

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

Observe o "" usado em torno da entrada: marcado e não '' como a solução de Peter J


essa deve ser a resposta selecionada. nome é uma maneira muito agradável para manter o controle de botões de rádio
quemeful

79

Você pode usar o seletor: marcado junto com o seletor de rádio.

 $("form:radio:checked").val();

13
Parece bom, no entanto, a documentação do jQuery recomenda usar [type = radio] em vez de: radio para obter melhor desempenho. É uma troca entre legibilidade e desempenho. Normalmente, tomo legibilidade sobre o desempenho em assuntos triviais, mas, neste caso, acho que [type = radio] é realmente mais claro. Portanto, nesse caso, seria semelhante a $ ("formulário input [type = radio]: marcado"). Val (). Ainda é uma resposta válida.
Nenhum

57

Se você deseja apenas o valor booleano, ou seja, se estiver marcado ou não, tente o seguinte:

$("#Myradio").is(":checked")

53

Obtenha todos os rádios:

var radios = jQuery("input[type='radio']");

Filtre para verificar o que é verificado

radios.filter(":checked")



25

Aqui está como eu escreveria o formulário e lidaria com a obtenção do rádio verificado.

Usando um formulário chamado myForm:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Obtenha o valor do formulário:

$('#myForm .radio1:checked').val();

Se você não está postando o formulário, eu o simplificaria ainda mais usando:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

A obtenção do valor verificado se torna:

    $('.radio1:checked').val();

Ter um nome de classe na entrada me permite estilizar facilmente as entradas ...


24

No meu caso, tenho dois botões de opção em um formulário e queria saber o status de cada botão. Isso abaixo funcionou para mim:

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>


1
Como assim, o status de cada botão? os botões de opção com o mesmo nome permitem que apenas um seja verificado; portanto, se você o marcar, o restante será desmarcado.
Dementic

17

Em um botão de opção gerado por JSF (usando a <h:selectOneRadio>tag), você pode fazer isso:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

onde selectOneRadio ID é radiobutton_id e ID do formulário é form_id .

Certifique-se de usar o nome em vez do ID , como indicado, porque jQuery usa esse atributo ( nome é gerado automaticamente pelo JSF semelhante a ID de controle).


15

Além disso, verifique se o usuário não seleciona nada.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}

15

Eu escrevi um plugin jQuery para definir e obter valores de botões de opção. Ele também respeita o evento "change" neles.

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

Coloque o código em qualquer lugar para ativar o suplemento. Então aproveite! Ele simplesmente substitui a função val padrão sem quebrar nada.

Você pode visitar este jsFiddle para experimentá-lo em ação e ver como ele funciona.

Violino


14

Se você tiver vários botões de opção em formato único,

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

Isso está funcionando para mim.




11

Para obter o valor do rádio selecionado que usa uma classe:

$('.class:checked').val()

10

Eu uso esse script simples

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});

Use o evento de clique, em vez do evento de alteração, se você quer que ele funcione em todos os navegadores
Matt Browne

10

Usa isto:

value = $('input[name=button-name]:checked').val();

8

DEMO : https://jsfiddle.net/ipsjolly/xygr065w/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>


6

Se você tiver apenas 1 conjunto de botões de opção em 1 formulário, o código do jQuery é tão simples quanto isto:

$( "input:checked" ).val()

5

Lancei uma biblioteca para ajudar com isso. Puxa todos os valores de entrada possíveis, na verdade, mas também inclui qual botão de opção foi verificado. Você pode conferir em https://github.com/mazondo/formalizedata

Ele fornecerá um objeto js das respostas, para um formulário como:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

Darei à você:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}

4

Para recuperar todos os valores dos botões de opção na matriz JavaScript, use o seguinte código jQuery:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();

2
Os botões de opção não são os mesmos que as caixas de seleção. Este exemplo usa caixas de seleção.
Matt Browne

4

tente-

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);

4

JQuery para obter todos os botões de opção no formulário e o valor verificado.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});

3

Outra maneira de obtê-lo:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <span><input type="radio" name="q12_3" value="1">1</span><br>
   <span><input type="radio" name="q12_3" value="2">2</span>
</form>


2
$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});

1

A partir dessa pergunta , criei uma maneira alternativa de acessar os selecionados atualmente inputquando você estiver em um clickevento para o respectivo rótulo. O motivo é que o recém-selecionado inputnão é atualizado até depois do labelevento de clique.

TL; DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});


1

O que eu precisava fazer era simplificar o código C #, ou seja, fazer o máximo possível no JavaScript de front-end. Estou usando um contêiner fieldset porque estou trabalhando em DNN e ele tem seu próprio formulário. Portanto, não posso adicionar um formulário.

Preciso testar qual caixa de texto de 3 está sendo usada e, se for, qual é o tipo de pesquisa? Inicia com o valor, contém o valor, Correspondência exata do valor.

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

E meu JavaScript é:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Apenas dizendo que qualquer tag que contenha um ID pode ser usada. Para DNNers, é bom saber. O objetivo final aqui é passar para o código de nível médio o necessário para iniciar uma pesquisa de peças no SQL Server.

Dessa forma, não preciso copiar também o código C # anterior, muito mais complicado. O trabalho pesado está sendo feito aqui.

Eu tive que procurar um pouco por isso e depois mexer com ele para fazê-lo funcionar. Portanto, para outros DNNers, espero que seja fácil de encontrar.

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.