Aktivieren Sie das Optionsfeld, wenn Sie auf DIV klicken

Question

Ich schreibe eine Quizanwendung mit php/jquery. Die Antwort Auswahlen sind wie so enthalten:

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

Nach w/CSS gestylt wird, diese Antworten mit einer Antwort pro Zeile in einem Container erscheinen. Jede Antwort hat ihre eigene Box im Container. Ich möchte, dass der Benutzer in der Lage ist, irgendwo innerhalb des einzelnen Antwortdivs zu klicken und die Radioauswahl aktiviert zu lassen.

Wie kann ich die Optionsfeldüberprüfung aktivieren, wenn ein Benutzer in das Container-div der Optionsschaltfläche klickt und jquery verwendet?

Answer 1

Anstatt jQuery zu verwenden, kann dies alles in nativem HTML mit dem Element <label> erfolgen. Here is a sample davon in Aktion.

<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

vielleicht so etwas wie:

$('#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

korrekte Verwendung des Label-Tag ist:

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

for = "..." macht immer Bezug auf die ID des Eingangs.

Answer 4

ich mit tj111 zustimmen, aber wenn nicht immer Anzug:

• Schwieriger Stil.
• Etiketten funktionieren nur, wenn Text in ihnen (Danke Michael)

Hier ist der alternative Code mit div und jQuery ist:

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

Mit der "aktiven" Klasse ist jetzt ja verstecken die Radios und verwenden Stylesheet zum Hervorheben.