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

2024-01-01

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


为了选中表内一行的复选框,我们首先检查是否type attribute如果我们定位的元素不是复选框,那么我们将检查嵌套在该表行内的所有复选框。

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

Demo http://jsfiddle.net/FbHAV/


如果您想突出显示表格行checkbox checked比我们可以使用if条件与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 http://jsfiddle.net/FbHAV/2/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击表格行以使用 jQuery 选择复选框 的相关文章

随机推荐