选中复选框时如何将类添加到表格行？

Question

我正在尝试添加一个类（以便我以后可以设置样式）表行，其中选中了复选框（JQuery 和 Google Apps 脚本）

目前，我有一些在使用按钮时可以使用的功能。但是，当我尝试修改它们时，它们并没有按预期工作。我什至尝试过.addCss，但没有奏效。当我检查控制台时，我看不到曾经添加过一个类。我曾经让它工作过，但现在似乎无法回到那个点！

我看到 THIS 并对其进行了修改，但 css 没有显示出来。

相关代码

<script>
 //BUTTONS
 $(document).ready(function () {
    $("#tbody tr").on('input', function () {
      var checkbox= $(this).closest('tr').find('[type="checkbox"]');
      checkbox.prop('checked', $(this).val());
    });

   //HIDE UNCHECKED ROWS
    $("#clicker").click(function () {
      $('[type="checkbox"]:not(:checked)').closest('tr').hide();
      return false;
    });

    //SHOW ALL ROWS
     $("#show").click(function () {
      $('[type="checkbox"]:not(:checked)').closest('tr').show();
      return false;
    });

    //CLEAR ALL CHECK MARKS
     $("#clear").click(function () {
      $('[type="checkbox"]').removeAttr('checked');
      return false;
    });

});
 </script>


<script>
//CURRENT ATTEMPT
//I can check all boxes, but styling doesn't work. 
   function setClass() {
  var checkboxes = $('tbody').find('.checkbox');
  checkboxes.closest('tr').toggleClass('on', false);
  checkboxes.not('.check_all').filter(':checked').closest('tr').toggleClass('on', true);
}
$(function($) {
  $(".check_all").on('change', function() {
    var checkAll = $(this).prop("checked");
    $(".checkbox").prop('checked', checkAll);
    var checkboxes = $('tbody').find('.checkbox')
      .eq(0).trigger('setclass');
  });
  var checkboxes = $('tbody').find('.checkbox');
  checkboxes.on('change', function() {
    if ($(this).prop("checked")) {
      $(".check_all").prop('checked', false);
    }
    if ($('.checkbox:checked').length == $('.checkbox').length) {
      $(".check_all").prop('checked', true);
    }
    $(this).trigger('setclass');
  });
  checkboxes.on('setclass', setClass);
  checkboxes.eq(0).trigger('setclass');
});
</script>

风格

<style>
  table, td {
  border: 1px solid black;
  border-collapse: collapse;
}
//CELL WIDTH
td {
   min-width:100px;
}
//TABLE HEAD
th {
   font-size: 20px;
   border: 2px solid black;
   background: #66e9ff;
   border-collapse: collapse;
}
//STYLING FOR CHECKED ROW
 tr.on td {
   background: #ffbbbb;
 }
//STYLING FOR CHECKED ROW
 .on>td {
   color: dark;
 }
//STYLING FOR HOVERING OVER ROW
#tbody tr:hover {
    background-color:yellow;
}
//SELECTABLE
 #feedback { font-size: 1.4em; }
  #table .ui-selecting { background: #FECA40; }
  #table .ui-selected { background: #928bff; color: white; }
  #table { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #table tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>

1. 如何在选中复选框的表格行中添加一个类？
2. 子问题，我应该以不同的方式编写我的其他复选框功能吗？

Answer 1

我认为这就是您要寻找的。考虑以下代码。

$(function() {

  function setCheck(o, c) {
    o.prop("checked", c);
    if (c) {
      o.closest("tr").addClass("checked");
    } else {
      o.closest("tr").removeClass("checked");
    }
  }

  function setCheckAll(o, c) {
    o.each(function() {
      setCheck($(this), c);
    });
    if (c) {
      $(".check_all").prop("title", "Check All");
    } else {
      $(".check_all").prop("title", "Uncheck All");
    }
  }

  $(".check_all").on('change', function() {
    setCheckAll($("tbody input[type='checkbox']"), $(this).prop("checked"));
  });
  $("tbody tr").on("click", function(e) {
    var chk = $("[type='checkbox']", this);
    setCheck(chk, !$(this).hasClass("checked"));
  });
});

table {
  border: 1px solid black;
  border-collapse: collapse;
}

#table {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#table tr {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

thead tr th {
  background-color: #66e9ff;
  font-size: 20px;
  border: 2px solid black;
  border-collapse: collapse;
}

tbody td {
  min-width: 100px;
  border: 1px solid black;
}

tbody td:first-child {
  text-align: center;
}

tbody tr.checked td {
  background-color: #ffbbbb;
  color: dark;
}

tbody tr:hover {
  background-color: yellow;
}

#feedback {
  font-size: 1.4em;
}

table .ui-selecting {
  background: #FECA40;
}

table .ui-selected {
  background: #928bff;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th><input type="checkbox" class="check_all" value="Check All"></th>
      <th>Header 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>Label 1</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Label 2</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Label 3</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>Label 4</td>
    </tr>
  </tbody>
</table>

基本上我们有两种情况。用户检查单个项目或用户选择检查所有。对于选中的项目，它应该使用样式类更新父级<tr>。这应该是选中或未选中的单个项目，或所有项目的情况。

我为单个对象创建了一个小函数来完成此操作。然后我制作了一个函数，可以为“检查所有”场景迭代所有这些函数。我离开了.toggleClass()，因为它可能会混淆单次检查和全部检查。

更新

我将上面的代码更新为单击行而不是单击复选框。

希望这会有所帮助。