Averigüe si el botón de opción está marcado con JQuery?

584

Puedo configurar un botón de radio para que se marque bien, pero lo que quiero hacer es configurar una especie de 'oyente' que se active cuando se marca un cierto botón de radio.

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, ¿eso aparece cuando se marca el botón de opción sin la ayuda de la función de clic?

Keith Donegan
fuente
1
relacionado Monitoring when a radio button is unchecked stackoverflow.com/questions/5824639/…
Adrien Be

Respuestas:

1082
$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
David Hedlund
fuente
¡Bingo! gracias David Entonces, ¿tendría que invocar una acción (clic, etc.) para mostrar la alerta? ¿Hay alguna manera de hacer esto sin hacer clic?
Keith Donegan
3
Esto no resuelve el "sin la ayuda de la función de clic", ¿verdad?
Znarkus
55
@ Znarkus: OP parece satisfecho. ¿Diría usted que su propio uso de ('#radio_button').clickes sin click?
David Hedlund
3
@David La segunda línea debería ser if ($('#radio_button').is(':checked'))) { alert("it's checked"); }: olvidó el signo jQuery $ y luego debe envolverlo todo entre paréntesis.
zuallauz
2
@zua: tienes razón! incluso tenía un error de sintaxis, como era antes (paréntesis sin igual). arreglado
David Hedlund el
154

Si tiene un grupo de botones de radio que comparten el mismo atributo de nombre y al enviar o algún evento que desea verificar si uno de estos botones de radio fue marcado, puede hacerlo simplemente con 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

Ref. API jQuery

Parag
fuente
Esto no funcionó para mí. Si alerta ($ ("input [@ name = 'shipping_method']: marcado"). Val ()); todavía me da el valor incluso si el botón de opción no está seleccionado.
AndrewC
1
Nota: Si tiene varios formularios con grupos de botones de opción que usan el mismo nombre, debe asegurarse de verificar solo los del formulario que se envía. Una opción para hacer esto es usar el método find en el formulario: $('#myform').submit(function(event){ if (!$(this).find("input[name='name']:checked").val()) {
Benjamin
41

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!

Patrick DaVader
fuente
32

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 cambia el estado mediante programación, también debe activar este evento:

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

// Consultar clase

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

// Verifica el nombre

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

// Verificar datos

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

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

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});
Saeb Amini
fuente
De hecho, .prop()es mucho más rápido y simplemente más fácil de escribir.
Marc.2377
10

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

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

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 debería ser la respuesta que estás buscando. si está utilizando la versión de Jquery anterior a 1.9.1, intente utilizarla porque la función en vivo ha quedado en desuso.

iCezz
fuente
6

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

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

funciona para mi...

Bill Warren
fuente
Respuesta más útil
amal50
5

Trabajando con todo tipo de botones de radio y navegadores

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

Jsfiddle de trabajo aquí

Thyagarajan C
fuente
3

Botón de radio generado dinámico Compruebe el valor de radio obtenido

$("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{}});
Dhaval Kariya
fuente
3

$ ('. radio-button-class-name'). is ('marcado') no funcionó para mí, pero el siguiente código funcionó bien:

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }
Jokerius
fuente
1
Como lo usó con una clase en lugar de una ID, habría devuelto una lista de nodos, en lugar de un elemento. $('.radio-button-class-name').first().is(':checked')Debería haber funcionado.
Levi Johansen
2

prueba esto

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

Prueba esto:

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

jQuery sigue siendo popular, pero si no desea tener dependencias, consulte a continuación. Función breve 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>

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

Para versiones de jQuery anteriores a 1.6, use:

$("#radio_1").attr('checked', 'checked');
Jayendra Manek
fuente
2
Esto establece el valor de la checkedpropiedad, en lugar de consultarlo.
Marc.2377