Sprawdź przycisk radiowy po kliknięciu DIV

Question

Piszę aplikację do quizu za pomocą php/jquery. Wybory odpowiedzi zawarte są w taki sposób:

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

Po stylizowany w/css, te odpowiedzi pojawiają się w pojemniku z jedną odpowiedź w każdym wierszu. Każda odpowiedź ma swoje własne pudełko w pojemniku. Chcę, aby użytkownik mógł kliknąć w dowolnym miejscu wewnątrz indywidualnego elementu div odpowiedzi i mieć zaznaczoną opcję wyboru radia.

Jak mogę aktywować sprawdzanie przycisku radiowego, gdy użytkownik kliknie w div elementu kontenerowego przycisku, używając jquery?

Answer 1

Zamiast używać jQuery, można to zrobić w natywnym kodzie HTML przy użyciu elementu <label>. Here is a sample z tego w akcji.

<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

może coś takiego:

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

prawidłową eksploatację Etykieta jest:

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

for = "..." zawsze odnosi się do identyfikatora wejściowego.

Answer 4

zgadzam się z tj111, ale jeśli nie zawsze pasuje:

• Trudniejsze do stylu.
• etykiety tylko działać, jeśli nie jest to tekst w nich (dzięki Michael)

Oto alternatywa kod przy użyciu div i jQuery:

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

Z „aktywnym” klasy teraz można nawet ukryć radia i użyj arkusza stylów do podświetlania.