jQuery obtém o valor do botão de opção selecionado


557

A declaração do problema é simples. Preciso ver se o usuário selecionou um botão de opção de um grupo de opções. Cada botão de opção no grupo compartilha o mesmo ID.

O problema é que não tenho controle sobre como o formulário é gerado. Aqui está o código de exemplo de como um código de controle de botão de opção se parece:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Além disso, quando um botão de opção é selecionado, ele não adiciona um atributo "marcado" ao controle apenas com o texto marcado (acho que apenas a propriedade marcada sem um valor) . Abaixo está a aparência de um controle de rádio selecionado

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Alguém pode me ajudar com o código jQuery que pode me ajudar a obter o valor do botão de opção marcado?


71
Você tem vários elementos com o mesmo ID? Isso é terrível.
Matt Bola


Como isso funciona com todos eles com o mesmo ID? Ao avaliar por ID, a avaliação não para no primeiro elemento correspondente? Qual é o objetivo aqui: são elementos dinâmicos mostrados em momentos diferentes?
Mark-Carpenter Jr #

1
FYI, o assistente @ Html.RadioButtonFor do ASP.NET MVC gerará todos os botões de opção com o mesmo ID. oops.
Triynko

Respostas:


1120

Apenas use.

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

Tão fácil que é.


25
Não se esqueça dos sinais de cotação: $ ("input [name = '" + fieldName + "']: marcado"). Val ();
Atara

4
@Guraprasad Rao: É um código adequado - as aspas não são necessárias neste caso. Experimente e veja.
Stefan

2
Por que isso retorna "on" em vez do valor especificado no HTML? EDIT: Porque eu não tinha aspas em torno dos meus valores.
Vincent

3
$ ('input [name = "name_of_our_radiobutton"]: marcado'). val ();
Sameera Prasad Jayasinghe

1
Observe que, se nenhum botão for selecionado, isso retornará null, o que é lógico, mas às vezes pode confundir você quando você está acostumado a ver ""como o valor padrão por meio da .val()chamada.
Xji

313

Primeiro, você não pode ter vários elementos com o mesmo ID. Sei que você disse que não pode controlar como o formulário é criado, mas ... tente de alguma forma remover todos os IDs dos rádios ou torná-los únicos.

Para obter o valor do botão de opção selecionado, selecione-o pelo nome com o :checkedfiltro.

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

EDITAR

Então você não tem controle sobre os nomes. Nesse caso, eu diria que coloque esses botões de opção dentro de uma div, nomeada, digamos radioDiv, e modifique levemente seu seletor:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

75

A maneira mais simples de obter o valor do botão de opção selecionado é a seguinte:

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

Nenhum espaço deve ser usado entre o seletor.


A opção mais direta, é essa.
andreszs 10/08/19

44
$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

Certifique-se de envolver isso na função pronta para DOM ( $(function(){...});ou $(document).ready(function(){...});).


Estou sempre recebendo um valor em branco com esse código. Acho que isso se deve ao fato de eu não ter uma propriedade com o valor verificado apenas um texto marcado (não tenho certeza se podemos considerá-lo uma propriedade)
user1114212

Você está selecionando o botão de opção pelo seu ID? Você mudou radioIDpara o seu ID?
Purag

37
  1. No seu código, o jQuery procura apenas a primeira instância de uma entrada com o nome q12_3, que neste caso possui o valor 1. Você deseja uma entrada com o nome q12_3 :checked.
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. Observe que o código acima não é o mesmo que usar .is(":checked"). A is() função do jQuery retorna um booleano (verdadeiro ou falso) e não um elemento.

28
<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

Isso retornará o valor verificado do botão de opção.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}

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

para atributos aninhados

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

Não se esqueça de chaves simples para o nome


20

Obtenha todos os rádios:

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

Filtre para obter o que foi verificado

radios.filter(":checked");

OU

Outra maneira de encontrar o valor do botão de opção

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();

3
Eu uso $('[name=your_inputs_names]:checked').val()porque eles sempre têm o mesmo nome exclusivo
vladkras

4
Bom uso de.filter()
Mark Carpenter Jr

2
Isso .filter(). Desejo que esta resposta possa estar no topo.
Yusril Maulidan Raji 4/04/19

16

Para obter o valor do botão de opção selecionado, use RadioButtonName e o ID do formulário que contém o RadioButton.

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

OU apenas

$('form input[type=radio]:checked').val();

12

Veja o exemplo que funciona bem

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();


12

Veja abaixo o exemplo de trabalho com uma coleção de grupos de rádio, cada um associado a seções diferentes. Seu esquema de nomeação é importante, mas, idealmente, você deve tentar usar um esquema de nomeação consistente para entradas de qualquer maneira (especialmente quando elas estão em seções como aqui).

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>


12

Use o código abaixo

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

Observe que o atributo value deve ser definido para obter "Masculino" ou "Feminino" em seu resultado.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>

7

Tente isso com exemplo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>

7

Apenas por nome

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});

6
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

1
Por que se preocupar em fazer a comparação de cadeias undefinedquando você tem certeza de que o valor deve ser checked? Não há necessidade no jQuery.
Devin Burke

Na pergunta, não vejo nenhuma informação sugerindo que um botão de opção seja verificado desde o início. Quero dizer, é assim na maioria dos casos com botões de opção. Portanto, no caso em que teríamos que verificar se nenhum deles foi selecionado, attr ("marcado") retornaria um objeto nulo.
Tadej Magajna

Certo, mas eu quis dizer que retornar nulo não causaria um erro, portanto a comparação "undefined"é desnecessária.
Devin Burke

5

Você pode obter o valor do botão de opção selecionado Id usando isso em javascript / jQuery.

$("#InvCopyRadio:checked").val();

Espero que isso ajude.


muito eficiente !!
MHJ

4

A melhor maneira de explicar esse tópico simples é fornecendo um exemplo simples e um link de referência:

No exemplo a seguir, temos dois botões de opção. Se o usuário selecionar qualquer botão de opção, exibiremos o valor do botão de opção selecionado em uma caixa de alerta.

Html:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery: -

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });

4

Eu sei que estou entrando tão tarde. Mas vale ressaltar que é preciso

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

E então eu verifiquei isso em meus js. Poderia ser como

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

`


3
<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

e manipule o jquery para alerta como para o valor definido / Alterado através do ID da div:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

é tão fácil....:-}


Uma maneira mais simples de fazer isso usando o ID pai seria .... $ ("# subscriptions"). On ("change", function () {var selection = $ (this) .find ("input: selected") .val (); alerta (seleção);});
MistyDawn

3

Outra maneira fácil de entender ... Está funcionando:

Código HTML:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Código Jquery:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

3

botão de opção de grupo múltiplo valor secreto para matriz

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6


você pode adicionar alguma explicação para que mais pessoas possam entender.
Shanteshwar Inde 01/04/19

2

Não sou javascript, mas encontrei aqui para pesquisar esse problema. Para quem pesquisar no google e encontrar aqui, espero que isso ajude alguns. Então, como em questão, se temos uma lista de botões de opção:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

Posso encontrar qual deles foi selecionado com esse seletor:

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

Mesmo se não houver nenhum elemento selecionado, ainda não recebo erro indefinido. Portanto, você não precisa escrever uma declaração if extra antes de obter o valor do elemento.

Aqui está um exemplo muito básico do jsfiddle .


1
Este é um uso incorreto do atributo name para entradas de rádio. Os botões de opção em um grupo devem ter o mesmo nome se você deseja permitir apenas um único valor do grupo. Fazê-lo dessa maneira faz funcionar como caixas de seleção, permitindo várias seleções em vez de uma única seleção dentro do grupo.
MisturaDawn

@MistyDawn você está certo, eu nem me lembro como escrevi isso, provavelmente é por consertar um bug.
Yusuf Uzun

2

Aqui estão 2 botões de opção, nomeadamente rd1 e Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

A maneira mais simples de verificar qual botão de opção está marcado, marcando a propriedade individual is (": selected")

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

Esta não é uma solução muito robusta. É melhor ter apenas uma div contendo e, em seguida, olhar para todos os rádios abaixo dela e selecionar a opção marcada. Você também pode olhar para todos os rádios com um determinado nome e depois encontrar o marcado. Isso reduz a necessidade de alterar o código toda vez que um botão é adicionado.
Richard Duerr 13/10

Se a sua página tiver mais de 2 entradas de rádio, isso pode ficar MUITO confuso e atribuir um ID a cada rádio consumiria muito tempo. Esse método normalmente não seria considerado uma boa prática.
MistyDawn #

2

Even inputnão é necessário, como sugerido por outras respostas. O código a seguir também pode ser usado:

var variable_name = $("[name='radio_name']:checked").val();

É essencialmente o mesmo que esta resposta de cinco anos atrás, apenas sem as inputaspas e com aspas desnecessárias.
Heretic Monkey

Essas citações não são desnecessárias e a razão de eu ter postado a resposta acima é que as pessoas saibam que a entrada não é necessário
shivamag00

Em seguida, considere editar sua pergunta para mencionar esses motivos, em vez de usar o comando "Use o seguinte código". Você pode consultar uma fonte que diz que as aspas são necessárias.
Heretic Monkey

@HereticMonkey Done the edit ... Thanks :) #
21419 shivamag00

1
    <input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

$(function() {
      $("#submit").click(function() {
        alert($('input[name=s_2_1_6_0]:checked').val());
      });
    });`

1
HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});

1

Caso você não saiba o nome sepcífico ou queira verificar todas as entradas de rádio em um formulário, use uma var global para verificar o valor de cada grupo de rádio apenas uma vez: `

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]: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.