Question

Estoy escribiendo una aplicación de prueba usando php/jquery. Las selecciones de respuestas están contenidas como tan:

<ul id="answers"> 
    <li> 
     <div> 
     <input type='radio' name='answer_id' value='313'> True 
     </div> 
    </li> 
    <li> 
     <div> 
     <input type='radio' name='answer_id' value='314'> False 
     </div> 
    </li> 
</ul> 

Después de ser labrado w/css, estas respuestas aparecen en un recipiente con una respuesta por línea. Cada respuesta tiene su propia caja dentro del contenedor. Quiero que el usuario pueda hacer clic en cualquier lugar dentro de la división de respuesta individual y hacer que se marque la selección de la radio.

¿Cómo puedo activar el botón de selección de selección cuando un usuario hace clic en el contenedor del botón de radio, usando jquery?

Answer 1

En lugar de usar jQuery, todo esto se puede hacer en HTML nativo utilizando el elemento <label>. Here is a sample de ello en acción.

<ul id="answers"> 
     <li> 
       <label> 
        <input type='radio' name='answer_id' value='313'> True 
       </label> 
     </li> 
     <li> 
       <label> 
        <input type='radio' name='answer_id' value='314'> False 
       </label> 
     </li> 
</ul> 

Answer 2

tal vez algo como:

$('#answers li div').click(function(){ 

    var r = $(this).find('input[type=radio]'); 
    if($(r).is(":checked")) 
    { 
    $(r).attr("checked", ""); 
    } 
    else 
    { 
    $(r).attr("checked", "checked"); 
    } 

}); 

Answer 3

El uso correcto de la etiqueta de la etiqueta es:

<input type="checkbox" id="checkme" name="checkme" /> <label for="checkme">Toggle this checkbox on/off</label> 

para = "..." siempre hace referencia a la identificación de la entrada.

Answer 4

Estoy de acuerdo con tj111, pero si no lo hace siempre traje:

• más difícil de peinar.
• etiquetas sólo funcionan si hay texto en ellos (gracias Michael)

Este es el código alternativo utilizando div y jQuery:

$('input:radio').click(ev){ 
    ev.stopPropagation(); 
}).parent().click(function(ev){ 
    ev.preventDefault(); 
    $(this).children('input').click(); 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

Con la clase "activa" ahora incluso se puede ocultar las radios y la hoja de estilos de uso para resaltar.