desarrollo-web-br-bd.com

¿Averiguar si el botón de opción está marcado con JQuery?

Puedo configurar un botón de opción para que se verifique bien, pero lo que quiero hacer es configurar una especie de "oyente" que se active cuando se marca un determinado botón de opción.

Tomemos, por ejemplo, el siguiente código:

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

agrega un atributo marcado y todo está bien, pero ¿cómo haría para agregar una alerta? Por ejemplo, ¿aparece cuando se marca el botón de opción sin la ayuda de la función de clic?

537
Keith Donegan
$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
988
David Hedlund

Si tiene un grupo de botones de opción que comparten el mismo atributo de nombre y al enviar o algún evento que desea verificar si se ha marcado uno de estos botones de opción, puede hacerlo simplemente mediante el siguiente 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!');
    }
  });
});

Fuente

jQuery API Ref

140
Parag

Como la solución de Parag arrojó un error para mí, aquí está mi solución (combinando la de David Hedlund y la de Parag):

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

¡Esto funcionó bien para mi!

38
Patrick DaVader

Tendría que vincular el evento de clic de la casilla de verificación, ya que el evento de cambio no funciona en IE.

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

Ahora, cuando cambias el estado mediante programación, también debes activar este evento:

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

// Revisar a través de la clase

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

// Verificar a través del nombre

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

// Comprobar a través de los datos

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

La solución será simple, ya que solo necesita 'escuchas' cuando se marca un determinado botón de opción. Hazlo :-

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

Otra forma es usar prop (jQuery> = 1.6) :

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

Si no desea una función de clic, use la función de cambio de Jquery

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

Esta debe ser la respuesta que estás buscando. Si está utilizando la versión de Jquery anterior a la 1.9.1, intente usarla ya que la función en vivo ha quedado en desuso.

6
iCezz

... Gracias chicos ... todo lo que necesitaba era el "valor" del botón de opción marcado donde cada botón de radio del conjunto tenía una identificación diferente ...

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

funciona para mi...

5
Bill Warren

Trabajar con todo tipo de botones de radio y navegadores

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

Trabajando Jsfiddle Aquí

4
Thyagu

botón de radio generado dinámicamente Comprobar radio obtener valor

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

Al cambiar el botón de radio dinámico

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

$ ('. radio-button-class-name'). is ('check') no me funcionó, pero el siguiente código funcionó bien:

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }
2
Jokerius

prueba esto

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

Prueba esto:

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

jQuery sigue siendo popular, pero si no desea tener dependencias, consulte a continuación. Función corta y clara para averiguar si el botón de opción está marcado en 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>
0
MaxWall