title: jquery 'this' used in a function problem
body: <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>