单击<tr>标记复选框时如何做到这一点

How to make that when you clicked <tr> marks checkbox

本文关键字：何做 复选框 这一点 tr 单击      更新时间：2023-09-26

大家好：）我有此代码，单击复选框时，该代码会将"选定"类添加到表中的

中。但是当我单击我的 时，如何使其也能正常工作？ 
<tr>
    <td><input type="checkbox"></td>
    <td><img src="../gallery/thumbnails/1.png" alt=""></td>
    <td>tryb</td>
    <td>png</td>
</tr>
<tr>
    <td><input type="checkbox"></td>
    <td><img src="../gallery/thumbnails/2.png" alt=""></td>
    <td>test</td>
    <td>png</td>
</tr>
<script type="text/javascript">
    $(':checkbox').change(function () {
        $(this).parents('tr').toggleClass('selected', this.checked);
    }).change();
</script>

也为tr添加点击事件：

<script type="text/javascript">
    $(':checkbox').change(function () {
        $(this).parents('tr').toggleClass('selected', this.checked);
    }).change();
    $("tr").click(function(){
        if($(this).find(":checkbox").is(":checked"))
           $(this).find(":checkbox").attr("checked",false); 
        else
           $(this).find(":checkbox").attr("checked",true);
        $(":checkbox").change();
    });
</script>

再添加一个事件侦听器 

$('tr').on('click',function(){
   $(this).toggleClass('selected');
});

并在checkbox更改处理程序中添加e.stopPropagation() -

$(':checkbox').change(function (e) {
        e.stopPropagation();
        $(this).parents('tr').toggleClass('selected', this.checked);
}).change();

$('tr').click(function(){
    $(this).find('input[type=checkbox]').prop('checked', true);
});

当tr点击时，你可以跳跳虎复选框点击事件

$(':checkbox').change(function (event) {
    $(this).parents('tr').toggleClass('selected', this.checked).addClass("checkbox");
});
// when click on tr it trigger checkbox click event
$('tr').click(function(event) {
  if(!$(this).is('.checkbox')) {
   $(this).find('input[type="checkbox"]').click(); 
  }
  $(this).removeClass('checkbox');
});

更新使用棘手的方法防止复选框中的双重效果

相关文章：