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

前端之家收集整理的这篇文章主要介绍了使用jQuery单击表格行选择复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
因为我没有发现任何问题,关于如何切换复选框点击一个表行,所以我想分享我的方法这个…

解决方法

为了选择表格中一行的复选框,我们将首先检查我们所针对的元素的type属性是否不是复选框,如果它不是一个checBox,我们将检查嵌套在该表行内的所有复选框。
$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkBox') {
      $(':checkBox',this).trigger('click');
    }
  });
});

Demo

如果要突出显示选中复选框的表行,我们可以使用if(“:checked”)的if条件,如果是,则使用.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

猜你在找的jQuery相关文章