title: Stop checkbox being checked twice when inside an li with a click event
body: <p>I'm writing a simple dropdown menu with jQuery and each item has a checkbox.  When I click on an <code>li</code> element the checkbox is selected.  However if I click on the checkbox itself, it does not select because it is effectively checked twice.  How can I stop this happening?</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/ZEp7V/" rel="nofollow">http://jsfiddle.net/ZEp7V/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="dropdown"&gt;Channels&lt;/div&gt;
  &lt;ul class="droplist"&gt;
      &lt;li&gt;News &lt;input type="checkbox" /&gt;&lt;/li&gt;
      &lt;li&gt;Sport &lt;input type="checkbox" /&gt;&lt;/li&gt;
      &lt;li&gt;Science &lt;input type="checkbox" /&gt;&lt;/li&gt;
      &lt;li&gt;Health &lt;input type="checkbox" /&gt;&lt;/li&gt;
      &lt;li&gt;All&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div#dropdown {
      border: 1px solid #000;
      width: 150px;
      height: 20px;
      line-height: 20px;
      padding: 10px;
      cursor: pointer;
  }
  
  ul.droplist {
      display: none;
      width: 170px;
      border: 1px solid #000;
      border-bottom: none;
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      position: absolute;
      background-color: #fff;
  }
  
  ul.droplist li {
      border-bottom: 1px solid #000;
      padding: 10px;
      cursor: pointer;
  }
  
  ul.droplist li input {
      float: right;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(document).ready(function(){
  
      $("#dropdown").click(function() {
          $(this).next().slideToggle(200);
      });
  
      $(".droplist li").click(function(e) {
          // Toggle the checkbox
          var input = $(this).children("input");
          $(input).prop("checked", !$(input).prop("checked"));
      });
  
      $(".droplist li:last").click(function () {
          // Select all boxes
          var check = $('.droplist li input:not(:checked)').length;
          $(".droplist li input").prop("checked", check);
      });
  
  });
  </code></pre>