单击表行以使用jQuery选中复选框

由于我之前没有发现任何问题，关于如何在单击表格行时切换复选框，因此我想分享我的方法…

以便选择表格中某行的复选框，我们将首先检查目标元素的

类型

属性

是否不是复选框（如果不是复选框），然后检查嵌套在该表行中的所有复选框

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

---

如果要突出显示选中的

复选框上的表行，我们可以使用
如果
的
条件为（：checked”）
，如果是，我们可以使用
找到最近的
tr
元素，并使用
addClass（）
向其添加类

这个问题对我很有用，但我对以前的解决方案有异议。如果单击表格单元格中的链接，将触发复选框切换。
我在谷歌上搜索了一下，看到一个建议，在表的链接上添加一个
event.stopPropagation（）
，如下所示：

$('.record_table tr a').click(function(event) {
  event.stopPropagation();
});

这个解决方案是个坏主意，因为我在表的链接上有一些jquery引导弹出框

所以这里有一个更适合我的解决方案。顺便说一句，当我使用Bootstrap2.3时，这行的突出部分是通过将“info”类添加到tr中来实现的。
要使用此代码，只需将
class=“可选”
添加到表标记中

$(".selectable tbody tr input[type=checkbox]").change(function(e){
  if (e.target.checked)
    $(this).closest("tr").addClass("info");
  else
    $(this).closest("tr").removeClass("info");
});

$(".selectable tbody tr").click(function(e){
  if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
    var cb = $(this).find("input[type=checkbox]");
    cb.trigger('click');
  }
});

您可能希望更具体地使用测试条件，例如，如果行中有其他输入。
您可以简单地触发此单击事件…：）

或

触发与上面提供的许多解决方案类似的单击将导致函数运行两次。改为更新道具值：

$('tr').click(function(event){
  alert('function runs twice');
  if(event.target.type !== 'checkbox'){
    //$(':checkbox', this).trigger('click');
    // Change property instead
    $(':checkbox', this).prop('checked', true);
  }
});

即使接受的@Mr.Alien答案非常有效，但如果您决定在某个时候使用jQuery动态添加一个新的
行，它也不起作用

我建议使用事件委派方法，这只是对公认答案的一个轻微修改

而不是：

。。。
$（'.record_table tr'）。单击（函数（事件）{
...

使用

。。。
$（'.record_table'）。在（'click'，'tr'，函数（事件）{
...

对于突出显示，使用相同的方法：

。。。
$（“.record_table”）。关于（'change'，“input[type='checkbox']”，函数（e）{
...

此处的更多信息：
非常好的解决方案，但有一个小问题（次要），复选框在标签标签内（用于css），您知道的任何jquery解决方法？最后一种方法是删除标签标签并将其全部切换到“span class=“label”或其他位置，然后更新css。无论您是否着手此项工作，都要感谢：）极好..您的解决方案节省了大量时间gg.很好的脚本。谢谢@Mr.Alien！为什么函数运行两次？@Gagantous–好问题。当事件发生在元素上时，它首先在元素上运行处理程序，然后在其父元素上运行处理程序，以此类推。在这个实现中，直接单击输入复选框时，函数不会运行两次（您会注意到我的JSFIDLE exp），但标准UI设计接受列或行上的事件（如单击）来设置元素的属性（如值或样式）。因此，以这种方式执行的触发器单击会导致函数运行两次–请参阅传播。对发生的情况进行良好的视觉再现：
  $(document).ready(function()
    {
      $("table tr th :checkbox").click(function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

  $(document).ready(function()
    {
      $("table tr th :checkbox").on('click',function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

$('tr').click(function(event){
  alert('function runs twice');
  if(event.target.type !== 'checkbox'){
    //$(':checkbox', this).trigger('click');
    // Change property instead
    $(':checkbox', this).prop('checked', true);
  }
});