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

You cant test it here

Answer 2

这个问题最近以另一种方式提出，与某些孩子的事件冒泡和停止有关。

您需要确保在您的案例中不会为复选框本身触发事件。

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

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

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

2 个答案: