make radio button selected based on an event

I have several divs of class OuterDiv that contain divs of class InnerDiv that contain radio buttons.

<div class="OuterDiv">
  <div class="InnerDiv">
    <input type="radio" name="TheOptions" />开发者_如何学C;option 1
  </div>
</div>

<div class="OuterDiv">
  <div class="InnerDiv">
    <input type="radio" name="TheOptions" />option 2
  </div>
</div>

<div class="OuterDiv">
  <div class="InnerDiv">
    <input type="radio" name="TheOptions" />option 3
  </div>
</div>

I'm looking to catch the event "user clicked on div" to make the corresponding radio button selected.

This is what I have so far:

$('.OuterDiv .InnerDiv').click(function {

  $(this).find('radio')....

});

I can get to the radio button but I'm stuck on making it selected and making any of the currently selected button unselected (unless selecting one automatically unselects all others).

Thanks for your suggestions.

---

try this

$('.OuterDiv .InnerDiv').click(function() {

  $(this).find('input:radio').attr('checked','checked');

});

working Demo

---

I'm not sure why you need TWO DIVs to wrap it. One will do.

$(this).find('input').attr('checked','true')

---

Try using

$(this).find('radio').attr('selected','selected');