make radio button selected based on an event
<p>I have several divs of class OuterDiv that contain divs of class InnerDiv that contain radio buttons.</p>

<pre><code>&lt;div class="OuterDiv"&gt;
  &lt;div class="InnerDiv"&gt;
    &lt;input type="radio" name="TheOptions" /&gt;option 1
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="OuterDiv"&gt;
  &lt;div class="InnerDiv"&gt;
    &lt;input type="radio" name="TheOptions" /&gt;option 2
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="OuterDiv"&gt;
  &lt;div class="InnerDiv"&gt;
    &lt;input type="radio" name="TheOptions" /&gt;option 3
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

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

<p>This is what I have so far:</p>

<pre><code>$('.OuterDiv .InnerDiv').click(function {

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

});
</code></pre>

<p>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).</p>

<p>Thanks for your suggestions.</p>
