选中所有复选框并添加课程

Question

我做了一个表格列表，每一行都有复选框。 我试图确定是否已选中该复选框，并在父TR元素上添加类。

但是问题是当选中全部复选框时，在TR上添加类无法正常工作。

这是我在这里尝试过的

演示：https://jsfiddle.net/upXr8/24

$(document).ready(function() {

  $("#checkAll").change(function(){
    if(this.checked){
      $(".checkbox").each(function(){
        this.checked=true;
      })              
    }else{
      $(".checkbox").each(function(){
        this.checked=false;
      })              
    }
  });

  $(".checkbox").click(function () {
    if ($(this).is(":checked")){
      var isAllChecked = 0;
      $(".checkbox").each(function(){
        if(!this.checked)
           isAllChecked = 1;
      })              
      if(isAllChecked == 0){ $("#checkAll").prop("checked", true); }     
    }else {
      $("#checkAll").prop("checked", false);
    }
  });



  $(".tbl tbody").on('click', 'input:checkbox', function() {
      $(this).closest('tr').toggleClass('selected', this.checked);
  });
  $('.tbl input:checkbox:checked').closest('tr').addClass('selected');

});

thead  tr { background:#aaa}
.wid1 { width:50px; }
.selected { background: red;} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" border=1 width=100%>
<colgroup>
  <col class="wid1">
</colgroup>
<thead>
  <tr>
    <td><input type="checkbox" name="" id="checkAll">all</td>
    <td>head</td>
  </tr>
</thead>
<tbody>
  <tr> 
    <td><input type="checkbox" name="" id="" class="checkbox"></td>
    <td>cell</td>
  </tr>
  <tr> 
    <td><input type="checkbox" name="" id="" class="checkbox" checked></td>
    <td>cell</td>
  </tr> 
</tbody>
</table>

如何修复代码？ 另外，我如何更简单地解决jquery？ 请帮忙。

Answer 1

只需在选中“全部”时在循环中添加text/javascript，然后在未选中时将$(this).parent().parent().addClass('selected')添加到循环中即可，

$(this).parent().parent().removeClass('selected')

有关更新的小提琴，请参见here

Answer 2

这可能对您有帮助

$(document).ready(
function() {
    //clicking the parent checkbox should check or uncheck all child checkboxes
    $("#checkAll").click(
        function() {
            $(this).closest('table').find('.checkbox').prop('checked', this.checked).closest('tr').toggleClass('selected', this.checked);
        }
    );
    //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
    $('.checkbox').click(
        function() {
if ($(this).closest('table').find('#checkAll').prop('checked') && this.checked == false){
  $(this).closest('table').find('#checkAll').attr('checked', false);
}
    $(this).closest('tr').toggleClass('selected', this.checked);
    
                var flag = true;
                $(this).closest('table').find('.checkbox').each(
                    function() {
                        if (this.checked == false){
                        flag = false;
                        return;
                        }
                            
                    }
                );
                $(this).closest('table').find('#checkAll').prop('checked', flag);
                 $(this).closest('table').find('.checkbox').toggleClass('selected', flag);
            
        }
    );
}
);

thead  tr { background:#aaa}
.wid1 { width:50px; }
.selected { background: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" border=1 width=100%>
<colgroup>
  <col class="wid1">
</colgroup>
<thead>
  <tr>
    <td><input type="checkbox" name="" id="checkAll">all</td>
    <td>head</td>
  </tr>
</thead>
<tbody>
  <tr> 
    <td><input type="checkbox" name="" id="" class="checkbox"></td>
    <td>cell</td>
  </tr>
  <tr> 
    <td><input type="checkbox" name="" id="" class="checkbox" checked></td>
    <td>cell</td>
  </tr> 
</tbody>
</table>