Saltar al contenido

jQuery marcar / desmarcar el botón de opción al hacer clic

Presta atención porque en esta división vas a hallar el resultado que buscas.

Solución:

He ampliado las sugerencias anteriores. Esto funciona para mí, con varias radios acopladas por el mismo nombre.

$("input[type='radio']").click(function()

  var previousValue = $(this).attr('previousValue');
  var name = $(this).attr('name');

  if (previousValue == 'checked')
  
    $(this).removeAttr('checked');
    $(this).attr('previousValue', false);
  
  else
  
    $("input[name="+name+"]:radio").attr('previousValue', false);
    $(this).attr('previousValue', 'checked');
  
);

Si todo lo que quiere hacer es tener una casilla de verificación que marque, no se preocupe por hacerlo con JQuery. Esa es la funcionalidad predeterminada de una casilla de verificación al hacer clic. Sin embargo, si desea hacer cosas adicionales, puede agregarlas con JQuery. Antes de jQuery 1.9, puede usar use $(this).attr('checked'); para obtener el valor en lugar de $(this).attr('checked', true);ya que el segundo establecerá el valor.

Aquí hay una demostración de violín que muestra la funcionalidad de la casilla de verificación predeterminada frente a lo que está haciendo con JQuery.

Nota: Después de JQuery 1.6Deberías usar $(this).prop; en vez de $(this).attr en los tres lugares (gracias @Whatevo por señalar esto y consulte aquí para obtener más detalles).

ACTUALIZAR:

Lo siento, se me pasó el requisito de que tenía que ser un botón de radio. Es posible que aún desee considerar la casilla de verificación, pero aquí está el código actualizado para la versión de entrada de radio. Funciona configurando el previousValue como un attribute en la casilla de verificación, ya que no creo prop es compatible con 1.3.2. También puede hacer esto en una variable con ámbito, ya que a algunas personas no les gusta establecer valores aleatorios attributes en campos Aquí está el nuevo ejemplo.

ACTUALIZACIÓN 2:

Como señaló Josh, la solución anterior solo funcionaba con un botón de opción. Aquí hay una función que hace que un grupo de radios no se pueda seleccionar por su nombre y un violín:

var makeRadiosDeselectableByName = function(name)
    $('input[name=' + name + ']').click(function() 
        if($(this).attr('previousValue') == 'true')
            $(this).attr('checked', false)
         else 
            $('input[name=' + name + ']').attr('previousValue', false);
        

        $(this).attr('previousValue', $(this).attr('checked'));
    );
;

En lugar de obtener el valor marcado, lo está configurando con:

var checked = $(this).attr('checked', true);

Para obtenerlo correctamente:

var checked = $(this).attr('checked');

Una solución de trabajo (con múltiples botones de opción que tienen diferentes valores):

// select radio buttons group (same name)
var radioButtons = $("input[type='radio'][name='rr']");
// save initial ckecked states
var radioStates = ;
$.each(radioButtons, function(index, rd) 
    radioStates[rd.value] = $(rd).is(':checked');
);

// handle click event
radioButtons.click(function() 
    
    // check/unchek radio button
    var val = $(this).val();  
    $(this).prop('checked', (radioStates[val] = !radioStates[val]));    
    
    // update other buttons checked state
    $.each(radioButtons, function(index, rd) 
        if(rd.value !== val) 
            radioStates[rd.value] = false; 
        
    );
);

PD:$().attr debe usarse en lugar de $().prop para jquery <1.6

Demostración: jsFiddle

Comentarios y puntuaciones de la guía

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *