Descubra se o botão de rádio é verificado com jQuery?

Question

Eu posso definir um botão de rádio para ser bem verificado, mas o que eu quero fazer é configurar uma espécie de 'ouvinte' que é ativado quando um determinado botão de rádio é verificado.

Tomemos, 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 rádio é verificado sem a ajuda da função de clique?

Answer 1

$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});

Answer 2

Se você tiver um grupo de botões de rádio compartilhando o mesmo atributo de nome e, mediante envio ou algum evento, você deseja verificar se um desses botões de rádio foi verificado, você pode fazer isso simplesmente pelo código a seguir:

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

jQuery API Ref

Answer 3

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

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

Isso funcionou bem pra mim!

Answer 4

Você teria que vincular o evento de clique da caixa de seleção, pois o evento de mudança 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ê muda programaticamente o estado, você também deve acionar este evento:

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

Answer 5

// Verifique através da aula

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

// verifique o nome

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

// verifique os dados

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

Answer 6

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

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});

Answer 7

A solução será simples, pois você só precisa de 'ouvintes' quando um determinado botão de rádio for verificado. Faça isso :-

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

Answer 8

Se você não quiser uma função de clique, use a função de mudança de jQuery

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

Esta deve ser a resposta que você está procurando. Se você estiver usando a versão jQuery acima 1.9.1, tente usar como função ao vivo foi descontinuada.

Answer 9

... obrigado pessoal ... tudo que eu precisava era o 'valor' do botão de rádio verificado, onde cada botão de rádio no conjunto tinha um ID diferente ...

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

funciona para mim...

Answer 10

Trabalhando com todos os tipos de botões de rádio e navegadores

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

Trabalhando JSfiddle aqui

Answer 11

botão de rádio gerado dinâmico Verificação do rádio Get Value

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

No botão de rádio dinâmico de mudança

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

Answer 12

$ ('. Radio-Button-Class-Name'). Is ('verificado') 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
    }

Answer 13

tente isso

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

Answer 14

Experimente isso:

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

Answer 15

O jQuery ainda é popular, mas se você não tiver dependências, veja abaixo. Função curta e clara para descobrir se o botão de rádio está verificado 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>

Answer 16

$("#radio_1").prop("checked", true);

Para versões do jQuery antes de 1.6, use:

$("#radio_1").attr('checked', 'checked');