Check Radio Button when clicking DIV

html, jquery

Solution

Instead of using jQuery, this can all be done in native HTML using the `<label>` element. Here is a sample of it in action.

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

Problem

I'm writing a quiz application using php / jquery. The answer selections are contained like so: ``` <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> ``` After being styled w/ css, these answers appear in a container with one answer per line. Each answer has its own box inside the container. I want the user to be able to click anywhere inside the individual answer div and have the radio select become checked. How can I activate the radio button check when a user clicks in the radio button's container div, using jquery?

Original source