How can I add Class to Table Row when Checkbox is Checked?

Question

I'm attempting to add a class (so I can later style) table rows where the checkbox is checked (JQuery and Google Apps Script)

Currently, I have some functions which work when using a button. However, when I've tried to modify them, they don't work as intended. I even tried .addCss and that didn't work. When I inspect the console, I can't see that a class has ever been added. I had it working once but now can't seem to get back to that point!

I saw THIS and modified it, but the css doesn't show up.

RELEVANT CODE

<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

<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. How can I add a class to a table row where the checkbox is checked?
2. Sub question, should I be writing my other checkbox functions in a different way?

Answer 1

I think this is what you're looking for. Consider the following code.

$(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>

Basically we have two scenarios. The User checks a single item or the user selects to check all. For an item that is checked, it should update the parent <tr> with a class for styling. This should be the case for a single item being checked or unchecked, or for all items.

I made a small function to accomplish this for a single object. I then made a function that could iterate all of them for the "Check All" scenario. I moved away from .toggleClass() since it could get confused between a single check and check all.

Update

I updated the above code to work with a click of the row versus just clicking the checkbox.

Hope this helps.