title: How do I toggle a checkbox when you click the enclosing <li> using JQuery?
body: <p>I have some html like:</p>
  
  <pre><code>&lt;ul class="myclass"&gt;
     &lt;li&gt;&lt;input type="checkbox"/&gt;some text&lt;/li&gt;
     &lt;li&gt;&lt;input type="checkbox"/&gt;some text&lt;/li&gt;
     &lt;li&gt;&lt;input type="checkbox"/&gt;some text&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want the checkboxes to be toggled either by clicking the checkboxes, or any part of the <li></p>
  
  <p>I tried the following jquery: </p>
  
  <pre><code>        $('ul.myclass li').click(
                  function() {
                      var cb = $(this).find(":checkbox")[0];
  
                      if (!$(cb).attr("checked")) {
                          $(cb).attr("checked", "checked");
                      } else {
                          $(cb).removeAttr("checked");
                      }
                  }
           );
  </code></pre>
  
  <p>Which works fine for when I click the text. But, now the checkboxes themselves dont actually work. It appears to be undoing the act of clicking on the checkbox.</p>
  
  <p>How do I prevent this?</p>