Descubra se o botão de opção está marcado com o JQuery?

584

Posso definir um botão de opção como bem, mas o que eu quero fazer é configurar um tipo de 'ouvinte' que é ativado quando um determinado botão de opção é marcado.

Tome, por exemplo, o seguinte código:

$("#element").click(function()
{ 
    $('#radio_button').attr("checked", "checked");
});

ele adiciona um atributo verificado e está tudo bem, mas como eu adicionaria um alerta. Por exemplo, isso aparece quando o botão de opção é marcado sem a ajuda da função de clique?

Keith Donegan
fonte
2
possível duplicata de Verificação de botão específico é verificado
Felix Kling
1
relacionada Monitoring when a radio button is unchecked stackoverflow.com/questions/5824639/...
Adrien Seja

Respostas:

1082
$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
David Hedlund
fonte
Bingo! obrigado David. Então, eu teria que invocar uma ação (clique etc) para mostrar o alerta? Existe uma maneira de fazer isso sem clicar?
Keith Donegan
3
Isso não resolve "sem a ajuda da função de clique", não é?
Znarkus 16/02/10
5
@Znarkus: OP parece satisfeito. você argumentaria que seu próprio uso ('#radio_button').clické sem click?
David Hedlund
3
@ David Segunda linha deve ser if ($('#radio_button').is(':checked'))) { alert("it's checked"); }- você esqueceu o sinal $ jQuery $ e, em seguida, você precisa colocar tudo entre parênteses.
Zuallauz 2/11
2
@zua: você está certo! ele até teve um erro de sintaxe, como era antes (colchetes inigualáveis). corrigido
David Hedlund
154

Se você tiver um grupo de botões de opção compartilhando o mesmo atributo de nome e, após o envio ou algum evento, deseja verificar se um desses botões de opção foi marcado, é possível fazer isso simplesmente pelo seguinte código:

$(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
      alert('One of the radio buttons is checked!');
    }
  });
});

Fonte

Ref da API jQuery

Parag
fonte
Isto não funcionou para mim. Se eu alertar ($ ("input [@ name = 'shipping_method']: marcado"). Val ()); ainda me fornece o valor, mesmo que o botão de opção não esteja selecionado.
24412 AndrewC
1
Nota: Se você tiver vários formulários com grupos de botões de opção usando o mesmo nome, verifique se apenas os formulários enviados. Uma opção para fazer isso é usar o método find no formulário: $('#myform').submit(function(event){ if (!$(this).find("input[name='name']:checked").val()) {
Benjamin
41

Como a solução de Parag gerou um erro para mim, aqui está a minha solução (combinando as de David Hedlund e Parag):

if (!$("input[name='name']").is(':checked')) {
   alert('Nothing is checked!');
}
else {
   alert('One of the radio buttons is checked!');
}

Isso funcionou bem pra mim!

Patrick DaVader
fonte
32

Você precisaria vincular o evento click da caixa de seleção, pois o evento change não funciona no IE.

$('#radio_button').click(function(){
    // if ($(this).is(':checked')) alert('is checked'); 
    alert('check-checky-check was changed');
});

Agora, quando você altera programaticamente o estado, também é necessário disparar este evento:

$('#radio_button').attr("checked", "checked");
$('#radio_button').click();
Znarkus
fonte
18

// Classe de verificação

if($("input:radio[class='className']").is(":checked")) {
     //write your code         
}

// Verifique o nome

if($("input:radio[name='Name']").is(":checked")) {
         //write your code         
}

// Verificar dados

if($("input:radio[data-name='value']").is(":checked")) {
         //write your code         
}
Nanhe Kumar
fonte
10

Outra maneira é usar (jQuery> = 1.6) :prop

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});
Saeb Amini
fonte
Na verdade, .prop()é muito mais rápido e simplesmente mais fácil de digitar.
precisa saber é o seguinte
10

A solução será simples, pois você só precisa de 'ouvintes' quando um determinado botão de opção é marcado. Faça :-

if($('#yourRadioButtonId').is(':checked')){ 
// Do your listener's stuff here. 
}
Shah-Kodes
fonte
6

Se você não deseja uma função de clique, use a função de alteração do Jquery

$('#radio_button :checked').live('change',function(){
alert('Something is checked.');
});

Essa deve ser a resposta que você está procurando. se você estiver usando a versão do Jquery acima da 1.9.1, tente usá-la como se a função ao vivo tivesse sido descontinuada.

iCezz
fonte
6

... Obrigado pessoal ... tudo o que eu precisava era do 'valor' do botão de opção marcado, onde cada botão de opção do aparelho tinha um ID diferente ...

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

funciona para mim...

Bill Warren
fonte
Resposta mais útil
amal50
5

Trabalhando com todos os tipos de botões de opção e navegadores

if($('#radio_button_id')[0].checked) {
   alert("radiobutton checked")
}
else{
   alert("not checked");
}

Trabalhando Jsfiddle Aqui

Thyagarajan C
fonte
3

botão de rádio gerado dinamicamente Verificar rádio obter valor

$("input:radio[name=radiobuttonname:checked").val();

Botão de opção dinâmica de mudança

$('input[name^="radioname"]').change(function () {if (this.value == 2) { }else{}});
Dhaval Kariya
fonte
3

$ ('. radio-button-class-name'). is ('selected') não funcionou para mim, mas o próximo código funcionou bem:

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }
Jokerius
fonte
1
Como você o usou com uma classe em vez de um ID, ele retornaria um nodelist, em vez de um elemento. $('.radio-button-class-name').first().is(':checked')deveria ter funcionado.
Levi Johansen
2

tente isso

    if($('input[name="radiobutton"]:checked').length == 0) {
        alert("Radio buttons are not checked");
    }
Muhammad Aamir Ali
fonte
1

Tente o seguinte:

alert($('#radiobutton')[0].checked)
Nandha kumar
fonte
0

O jQuery ainda é popular, mas se você quiser não ter dependências, veja abaixo. Função curta e clara para descobrir se o botão de opção está marcado no ES-2015:

function getValueFromRadioButton( name ){
  return [...document.getElementsByName(name)]
         .reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}

console.log( getValueFromRadioButton('payment') );
<div>  
  <input type="radio" name="payment" value="offline">
  <input type="radio" name="payment" value="online">
  <input type="radio" name="payment" value="part" checked>
  <input type="radio" name="payment" value="free">
</div>

MaxWall
fonte
-3
$("#radio_1").prop("checked", true);

Para versões do jQuery anteriores à 1.6, use:

$("#radio_1").attr('checked', 'checked');
Jayendra Manek
fonte
2
Isso define o valor da checkedpropriedade, em vez de consultá-lo.
precisa saber é o seguinte