单击表行以使用jQuery选择复选框 [英] Click table rows to select checkbox using jQuery

问题描述

由于我没有找到任何问题，关于如何切换复选框点击表格行，所以我想分享我的方法这个...

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...

推荐答案

为了选择表中行的复选框，我们首先检查类型 属性不是一个复选框，如果它不是一个checbox，我们将检查嵌套在该表行内的所有复选框。

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

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

演示

如果您想突出显示 比可以使用如果条件与是：checked），如果是，我们使用 .closest（）找到最接近的 tr $ c>，然后使用 addClass（）

If you want to highlight the table row on checkbox checked than we can use an if condition with is(":checked"), if yes than we find the closest tr element using .closest() and than we add class to it using 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
    }
});

演示

这篇关于单击表行以使用jQuery选择复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！