当我点击框中的任何位置时,如何正确选中此复选框？

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;
});

你不能在这里测试它.