title: JQuery toggle checkbox input with table cell click
body: <p>I want to make it so that if you click anywhere inside a table cell, the checkbox in the cell is toggled. It should also work normally if the checkbox is clicked directly.</p>
  
  <p>Here I used a red bordered blank "label" as the clickable area. Ideally I'd like to avoid labels.</p>
  
  <p><a href="http://jsfiddle.net/WPZf2/" rel="nofollow">http://jsfiddle.net/WPZf2/</a></p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;&lt;label&gt;&lt;input type="checkbox"/&gt;&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;
  &lt;/tr&gt;   
  </code></pre>
  
  <p>Here the table cell click is being detected.</p>
  
  <p><a href="http://jsfiddle.net/WPZf2/1/" rel="nofollow">http://jsfiddle.net/WPZf2/1/</a></p>
  
  <pre><code>    $('td').click(function(){
          alert('click!');
  </code></pre>
  
  <p>If false is returned and the checkbox is clicked, the checkbox initially checked and then when you dismiss the alert popup the checkbox clears again. (at least in Chrome, Firefox and IE11)</p>
  
  <p><a href="http://jsfiddle.net/WPZf2/2/" rel="nofollow">http://jsfiddle.net/WPZf2/2/</a></p>
  
  <pre><code>    $('td').click(function(){
          alert('click!');
          return false;
  </code></pre>
  
  <p>I tried this with return false and no return. If you click on the cell it works but it doesn't work if you click the checkbox.</p>
  
  <p><a href="http://jsfiddle.net/WPZf2/3/" rel="nofollow">http://jsfiddle.net/WPZf2/3/</a></p>
  
  <pre><code>var $elem = $(this).find('input');
  $elem.prop('checked', !$elem.prop('checked'));
  </code></pre>
  
  <p>If I do $elem.click() with no return statement it has the same problem.</p>
  
  <p><a href="http://jsfiddle.net/WPZf2/4/" rel="nofollow">http://jsfiddle.net/WPZf2/4/</a></p>
  
  <pre><code>$elem.click();
  </code></pre>
  
  <p>If I have "return false" it doesn't work at all:</p>
  
  <p><a href="http://jsfiddle.net/WPZf2/5/" rel="nofollow">http://jsfiddle.net/WPZf2/5/</a></p>
  
  <p>So basically I want to be able to click anywhere in a cell including directly on the checkbox to toggle the checkboxes.</p>