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?



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"); }
});

¡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


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!


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();

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         
}

10

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

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

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. 
}

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.


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...


Respuesta más útil
amal50


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{}});

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
    }

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");
    }


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>


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

Para versiones de jQuery anteriores a 1.6, use:

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

2
Esto establece el valor de la checkedpropiedad, en lugar de consultarlo.
Marc.2377
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.