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

Click table rows to select checkbox using jQuery

提问by Mr. Alien

As I didn't find any question asked before, on how to toggle checkbox on click of a table row, so I would like to share my approach to this...

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

回答by Mr. Alien

In order to select the checkbox of a row inside the table, we will first check whether the typeattributeof the element we are targetting is not a checkbox if it's not a checkbox than we will check all the checkboxes nested inside that table row.

为了选择表格内一行的复选框，我们将首先检查我们要定位typeattribute的元素是否不是复选框，如果它不是复选框，我们将检查嵌套在该表格行内的所有复选框。

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

Demo

演示

---

---

If you want to highlight the table row on checkboxcheckedthan we can use an ifcondition with is(":checked"), if yes than we find the closest trelement using .closest()and than we add class to it using addClass()

如果您想突出显示表格行，checkboxchecked我们可以使用if条件 with is(":checked")，如果是，则我们找到最接近的tr元素使用，.closest()然后我们使用addClass()

$("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) { //If the checkbox is checked
        $(this).closest('tr').addClass("highlight_row"); 
        //Add class on checkbox checked
    } else {
        $(this).closest('tr').removeClass("highlight_row");
        //Remove class on checkbox uncheck
    }
});

Demo

演示

回答by Jérémie

This question was useful to me but I had an issue with the previous solution. If you click on a link in a table cell, it will trigger the checkbox toggle. I googled this and I saw a proposition to add a event.stopPropagation()on the links of the table, like this:

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

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

This solution was a bad idea because I had some jquery bootstrap popover on a link of the table...

这个解决方案是一个坏主意，因为我在表的链接上有一些 jquery bootstrap popover ......

So here is a solutions that fits me better. By the way as I'm using bootstrap 2.3, the highlight of the line is made by adding the "info" class to the tr. To use this code, you just need to add class="selectable"to the table tag.

所以这里有一个更适合我的解决方案。顺便说一下，当我使用 bootstrap 2.3 时，该行的突出显示是通过将“info”类添加到 tr 来实现的。要使用此代码，您只需要添加class="selectable"到 table 标记。

$(".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');
  }
});

You will probably want to be more specific with the test condition, for exemple if you have other inputs in the row.

您可能希望对测试条件更具体，例如，如果您在行中有其他输入。

回答by CR Rollyson

Triggering a click like many of the solutions provided above will cause the function to run twice. Update the prop value instead:

像上面提供的许多解决方案一样触发点击将导致该功能运行两次。改为更新 prop 值：

$('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);
  }
});

Link to jsfiddle example here

在此处链接到 jsfiddle 示例

回答by WojtylaCz

Even though the accepted @Mr. Alien answer works great, it doesn't work in case you decide to add a new <tr>row dynamically with jQuery at some point.

尽管接受了@Mr. Alien 答案效果很好，如果您决定<tr>在某个时候使用 jQuery 动态添加新行，则它不起作用。

I recommend to use a event delegation approach, which is just a slight modification of accepted answer.

我建议使用事件委托方法，这只是对已接受答案的轻微修改。

Instead of:

代替：

... $('.record_table tr').click(function(event) { ...

... $('.record_table tr').click(function(event) { ...

use

用

... $('.record_table').on('click', 'tr', function(event) { ...

... $('.record_table').on('click', 'tr', function(event) { ...

And the same for the highlighting, use:

与突出显示相同，使用：

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

More info here: Click event doesn't fire for table rows added dynamically

此处有更多信息：Click 事件不会为动态添加的表行触发

回答by Kalpesh Desai

You may simply trigger this click event...:)

你可以简单地触发这个点击事件...:)

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

OR

或者

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