Как сделать так, чтобы этот флажок был установлен правильно, когда я щелкаю в любом месте окна?

Question

<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>

Как вы можете видеть, я пытался обернуть все это в <label>, но это не сработало.

Поэтому я попытался написать несколько jQuery вместо

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

Какой работает , за исключением того, что теперь, когда я нажимаю на сам флажок, он не проверяется.Я предполагаю, потому что он проверяется, а затем JS немедленно снимает его.Но я не совсем уверен, как бы я сказал «если я нажму где-нибудь, кроме прямо на флажок»?

Answer 1

Убедитесь, что событие не пришло из самого флажка, например:

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

Вы не можете проверить это здесь .

Answer 2

Совсем недавно этот вопрос был задан по-другому, что касается всплытия и остановки событий для определенных детей.

Необходимо убедиться, что событие не срабатывает для самого флажка в вашем случае.

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

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