How to make this checkbox get checked properly when I click anywhere in the box?

<li class="vehicle-item">
 <label>
  <input type="checkbox" name="take-vehicle" />
 <table summary="layout table">
  <thead>
   <tr>
    <th colspan="3">2004 Austin Cooper</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><img src="/media/icons/tick.png" alt="" /> Drivable</td>
    <td><img src="/media/icons/cross.png" alt="" /> Convertible</td>
    <td><img src="/media/icons/cross.png" alt="" /> Modified</td>
   </tr>
  </tbody>
 </table>
    </label>
</li>

As you can see, I've tried w开发者_如何学Pythonrapping the whole thing in a <label> but that didn't work.

So I tried writing some jQuery instead,

 $('.vehicle-item').click(function() {
  var $checkbox = $(this).find('input');
  $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

Which does work, except now when I click the checkbox itself, it doesn't get checked. I'm assuming because it's being checked, and then the JS unchecks it immediately. But I'm not quite sure how I would say "if I click anywhere except directly on the checkbox"?

Check that the event didn't come from the checkbox itself, like this:

$('.vehicle-item').click(function(e) {
  if(e.target.nodeName == "INPUT") return;
  var cb = $(this).find('input')[0];
  cb.checked = !cb.checked;
});

You cant test it here.

This question was asked in another way very recently, to do with event bubbling and stopping for certain children.

You need to ensure that the event does not fire for the checkbox itself in your case.

$('.vehicle-item').click(function() {
  if ($(e.target).is(':checkbox')) {
     return;
  }

  var $checkbox = $(this).find('input');
  $checkbox.attr('checked', !$checkbox.attr('checked'));
});