0

Necesito que cuando yo le de click a la tag a el radio se chequee. Hice una función para hacerlo y lo hace bien, el problema es que si quiero chequear otra que ya había chequeado ya no lo hace. Necesito las tags en ese orden y no puedo hacerlo.

Bienvenidas todas las sugerencias

$(function(){

  $(document).on('click','a',function(e){
    
    e.stopPropagation();
    e.preventDefault();
    
    $(this).find('input[type="radio"]').attr('checked','checked');
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#"><input type="radio" name="radio" value="0" checked>Opcion 1</a>
  <a href="#"><input type="radio" name="radio" value="1" >Opcion 2</a>
  <a href="#"><input type="radio" name="radio" value="2" >Opcion 3</a>
</div>

1
  • Entonces lo que te falta es que desmarque el botón o que es lo que te falta?
    – Sr1871
    Commented el 1 nov. 2017 a las 16:02

2 respuestas 2

1

En vez de usar .attr() para asignar el checked deberías usar .prop()

El método .prop() proporciona una forma de recuperar explícitamente valores de una propiedad, mientras .attr() recupera atributos.

$(function(){

  $(document).on('click','a',function(e){
    
    e.stopPropagation();
    e.preventDefault();
    
    $(this).find('input[type="radio"]').prop('checked','checked');
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#"><input type="radio" name="radio" value="0" checked>Opcion 1</a>
  <a href="#"><input type="radio" name="radio" value="1" >Opcion 2</a>
  <a href="#"><input type="radio" name="radio" value="2" >Opcion 3</a>
</div>

4
  • Funciona! Gracias Commented el 1 nov. 2017 a las 17:55
  • Camilo, solo una cosa, dejó de funcionar el evento nativo del radio, que me recomiendas. Commented el 1 nov. 2017 a las 18:36
  • @AlbertoSiurob eso es por que tienes el <input> dentro de tu <a> y en la función estas ejecutando un preventDefault() lo cual anula el comportamiento por defecto del elemento, es por eso que no funciona clicando en el input directamente Commented el 1 nov. 2017 a las 18:42
  • Resuelto, gracias @CamiloVasquez Commented el 1 nov. 2017 a las 18:46
1

Lo que ocurre es que cada que agregas el atributo checked al radio hijo que seleccionas este queda ahí aun cuando seleccionas otro elemento, por ejemplo cuando haces clic sobre cada uno el html queda de esta manera:

<div>
    <a href="#"><input type="radio" name="radio" value="0" checked="checked">Opcion 1</a>
    <a href="#"><input type="radio" name="radio" value="1" checked="checked">Opcion 2</a>
    <a href="#"><input type="radio" name="radio" value="2" checked="checked">Opcion 3</a>
</div>

por tanto al volver a hacer clic ya no funciona. Mencionaria el metodo removeAttr como una solución pero el uso de attr y similares esta deprecado y lo mejor en estos casos es utilizar el metodo prop('checked', 'cheked') para agregar el atributo.

Otra manera mas sencilla de lograr lo que deseas es utilizado la etiqueta label y enlazándola a tu checkbox mediante el atributo for="id"

<a href="#"><input type="radio" id="radio-1" name="radio" value="0" checked="checked"><label for="radio-1">Opcion 1</label></a>
<a href="#"><input type="radio" id="radio-2" name="radio" value="1"><label for="radio-2">Opcion 2</label></a>
<a href="#"><input type="radio" id="radio-3" name="radio" value="2"><label for="radio-3">Opcion 3</label></a>
  

De esta manera no necesitas utilizar jquery y enlazar eventos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.