Check Radio Button when clicking DIV

Question

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?

Answer 1

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>

Answer 2

maybe something like:

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

Correct usage of the label tag is:

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

for="..." always makes reference to the input's id.