jquery 'this' used in a function problem
<p>I am writing a basic web app, this has some list elements that I need to be able to click on the entire LI that surrounds each one to select the radio button held within, and only ensure the one I have clicked is selected. I can do this writing the code within the .click callback, however if I try to call the same code from a named function it falls down, I believe this is something to do with the "this" reference I am using, however I cannot seem to fix it.</p>

<p>The HTML is</p>

<pre><code>&lt;ul&gt; 
  &lt;form id="healthCheckAge" name="healthCheckAge"&gt; 
    &lt;li&gt; &lt;input type="radio" name="eighteen" value="18-30" /&gt;18-30 &lt;/li&gt; 
    &lt;li&gt; &lt;input type="radio" name="thirtyone" value="31-45" /&gt;31-45 &lt;/li&gt; 
    &lt;li&gt; &lt;input type="radio" name="fourtysix" value="46-65" /&gt;46-65 &lt;/li&gt; 
    &lt;li&gt; &lt;input type="radio" name="sixtyfive" value="65+" /&gt;65+&lt;/li&gt; 
  &lt;/form&gt; 
&lt;/ul&gt; 
</code></pre>

<p>And the JavaScript is </p>

<pre><code>function li_click(){
  //set the vars for the selectors
  var listInputs = $('#healthCheckAge li input');
  var clicked = listInputs.attr('name');
  //loop on all the li children to see if they match the clicked LI - if not ensure that they are unchecked and faded
  $(listInputs).each(function(index,Element){
    $(listInputs).attr('checked',false).parent().addClass('selected');
  });
  //set the radio button to checked and apply a style to it, while removing this from any other checked radio buttoon
  if($(listInputs).attr('name')==clicked){
    $(this).children().attr('checked','true').parent().removeClass('selected'); 
  } 
}

$('#healthCheckAge li').click(function(){
  li_click();                                 
});
</code></pre>

<p>I think the problem is that when I call the very last conditional statement the 'this' is not reflecting what I need.</p>

<p>Any ideas?</p>
