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>

如何将一个类添加到选中该复选框的表行中？
子问题，我应该以其他方式编写其他复选框功能吗？

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()，因为它可能在一次检查和全部检查之间造成混淆。

更新

我更新了上面的代码，以使单击该行而不是仅单击该复选框即可工作。

希望这会有所帮助。

jQuery：选中复选框时，将类添加到表行

1 个答案: