使用jQuery复选框突出显示表格行

我有以下HTML表格。每行包含一个复选框，后跟一些文本。使用jQuery复选框突出显示表格行

<table> 
    <tr> 
     <td><input type="checkbox" /></td> 
     <td>Name</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" /></td> 
     <td>Name2</td> 
    </tr> 
</table>

我需要一些帮助写一个脚本，将突出（添加类）已检查并取消选中将删除类的行。

来源

2012-07-08 James

http://codebins.com/codes/home/4ldqpb8

$(":checkbox").change(function() { 
     $(this).closest("tr").toggleClass("highlight", this.checked) 
    })

来源

2012-07-08 02:04:08 gaurang171

出于兴趣，为什么选择最接近而不是父母？ – 2013-05-18 08:21:35

因为CLosest找到第一个，然后停止搜索其他人，而父母一直走到文档的顶部，并且如果嵌套了trs，它将在所有这些元素上处理toggleClass。所以最接近的是更快，更高效和更少的错误机会。 – gaurang171 2013-05-20 16:00:56

$('[type="checkbox"]').change(function(){ 
    $(this).parents('tr').toggleClass('highlight') 
})

来源

2012-07-08 01:51:28 elclanrs

你好bruv，小记'：）'使其'是（ '：检查'）'，因为它勾选时应该突出显示。 – 2012-07-08 01:54:38

或者你可以在html中添加默认选中的复选框。除非他有动态元素，否则我会这样做，并保持js更小。 – elclanrs 2012-07-08 01:56:47

确实'：）'!!同意 – 2012-07-08 02:01:09

演示http://jsfiddle.net/328QV/

代码

$(document).ready(function() { 
    $("#Table input").click(function() { 
     if ($(this).is(":checked")) { 
      $(this).parent().parent().addClass("highlight"); 
     } else { 
      $(this).parent().parent().removeClass("highlight"); 
     } 
    }); 
});

来源

2012-07-08 01:51:58

$("#yourTableId input:checkbox").change(function() { 
     var $this = $(this); 
     if ($this.is(":checked")) { 
      $this.closest("tr").addClass("highlight"); 
     } else { 
      $this.closest("tr").removeClass("highlight"); 
     } 
    });

来源

2012-07-08 01:57:45

看看这个fiddle

$(document).ready(function() { 
    $("input:checkbox").change(function() { 
     alert(); 
     if ($(this).prop("checked") == true) { 
      $(this).closest('tr').addClass("checked"); 
     } else $(this).closest('tr').removeClass("checked"); 
    }); 
});

CSS

.checked { 
    background-color:red; 
}

来源

2015-04-13 09:16:01 Sukanya

使用jQuery复选框突出显示表格行

回答

相关问题