点击表格行选择复选框使用jQuery

65

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

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

Demo

如果你想突出显示checkboxchecked表行比我们可以使用一个if条件与is(":checked")，如果是比我们发现使用.closest()，比我们最接近的tr元素使用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

来源

2013-08-18 07:46:01

+0

优秀的解决方案，但有一个轻微的问题（次要），复选框是在标签标签（为CSS目的），你知道任何jQuery的解决方法？最后的手段是只删除标签标签，并将它们全部切换到“span class =”label“或其他东西并更新css。谢谢你是否得到这个或不:) :) – Onimusha

+0

非常棒..你的解决方案节省了很多时间 –

+0

GG。好的一段脚本。谢谢@Mr。外星人！ – PipBoy2000

7

这个问题对我很有用，但是我对以前的解决方案有问题。如果您单击表格单元格中的链接，它将触发复选框切换。我GOOGLE了这一点，我看到了一个命题放在桌子上的链接添加event.stopPropagation()，像这样：

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

该解决方案是一个坏主意，因为我有表的链接上一些jQuery的引导酥料饼。 ..

因此，这里是一个更适合我的解决方案。顺便说一句，因为我使用引导2.3，该行的亮点是通过向tr添加“info”类来完成的。要使用此代码，您只需将class="selectable"添加到表格标签。

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

你可能会想更具体与测试条件，为例，如果你有行中的其他投入。

来源

2014-01-19 21:17:18

0

你可能只是触发这个click事件... :)

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

来源

2016-01-12 11:32:22

2

触发像许多上面提供的解决方案的点击将导致运行两次的功能。更新道具值来代替：

$('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

来源

2016-08-01 18:58:28

+0

为什么函数运行两次？ – Gagantous

+0

@Gagantous - 很好的问题。当一个事件发生在一个元素上时，它首先在它上面运行处理程序，然后在它的父项上运行，等等。在此实现中，当直接单击输入复选框时（您会注意到我的jsfiddle exp），该函数不会运行两次，但标准UI设计接受列或行上的事件（如单击）以设置元素的属性（如值或样式）。所以触发器以这种方式点击实现会导致函数运行两次 - 请参见传播。发生了什么好视觉代表：https://javascript.info/bubbling-and-pturing –

+1

真的很好的解释，谢谢先生（y） – Gagantous

0

即使接受@Mr。外星人的答案效果很好，如果你决定在某些时候用jQuery动态地添加一个新的<tr>行，那么这种方法无效。

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

相反的：

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

使用

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

与同为高亮，使用：

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

更多的信息在这里：Click event doesn't fire for table rows added dynamically

来源

2016-09-13 20:44:48 WojtylaCz

点击表格行选择复选框使用jQuery

回答

相关问题