jquery
  • html
  • 2009-07-17 203 views 10 likes 
    10

    Estoy escribiendo una aplicación de prueba usando php/jquery. Las selecciones de respuestas están contenidas como tan:Botón de opción de verificación al hacer clic en DIV

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

    +1

    pregunta relacionada http://stackoverflow.com/questions/972366/jquery-focus-function-not-working-in-firefox/ –

    Respuesta

    25

    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> 
    
    +0

    perrrrfect. gracias. – Ian

    0

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

    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.

    1

    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.

    +0

    Eso es ... interesante. Qué tal: $ ('input: radio'). Click (función (ev) {ev.stopPropagation();}). Parent(). Click (función (ev) {ev.preventDefault(); $ (this). children ('input'). click();}); –

    +0

    Encontré que las etiquetas solo funcionaban cuando había texto (o una cantidad significativa de espacios en blanco) disponibles para hacer clic. Por el contrario, poner el clic en el padre podría arruinar el clic de radio real. Al volver a trabajar el código de romaninsh, resolví mi problema –

    +1

    Gracias, he actualizado mi respuesta para reflejar sus hallazgos. – romaninsh

    Cuestiones relacionadas