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

Question

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

Answer 1

为了选择表格内一行的复选框，我们首先检查我们目标元素的 type attribute 是否不是复选框(如果是)不是一个复选框，我们将检查嵌套在该表行内的所有复选框。

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

Demo

<小时/>

如果您想突出显示 checkbox checked 上的表格行，我们可以使用 if 条件和 is(": check")，如果是，那么我们使用 .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