如何将类添加到所有行答案

【问题标题】：How to add class to all rows如何将类添加到所有行
【发布时间】：2017-07-08 12:08:50
【问题描述】：

在给定的示例中，我可以在点击 td 的复选框时选择/取消选择每一行，但是如何在点击 id="selectAll" 时选择/取消选择所有行

JS：

$(document).ready(function () {

    $("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("warning");
        } else {
            $(this).closest('tr').removeClass("warning");
        }
    });
});

Demo Here (Fiddle)

【问题讨论】：

Select All Checkbox的可能重复
不需要两个函数。试试我的答案@Appy

标签： javascript jquery

【解决方案1】：

应涵盖所有情况，包括在选择/取消选择其他输入时适当切换selectAll

   var $dataInputs;

   var $selectAll = $('#selectAll').change(function() {
       $dataInputs.prop('checked', this.checked)
                .closest('tr')
                .toggleClass("warning", this.checked);
   });


   $dataInputs = $("input[type='checkbox']").not('#selectAll').change(function(e) {
     // toggle class on this row
     $(this).closest('tr').toggleClass("warning", this.checked);

     // adjust `selectAll` based on all rows selected or not 
     $selectAll.prop('checked', function() {
       return $dataInputs.length === $dataInputs.filter(':checked').length;
     });

   });

DEMO

【讨论】：

【解决方案2】：

您需要检查单击的复选框是selectAll 或not 像这样$(this).attr('id')=='selectAll'

$(document).ready(function () {

    $("input[type='checkbox']").change(function (e) {
    
       if($(this).attr('id')=='selectAll'){
          
           if($(this).is(":checked")){
           
               $('table').find('tr').addClass("warning");
                  
             $('table').find("input[type='checkbox']").prop('checked',true);
            
            }else{
            
             $('table').find('tr').removeClass("warning");
                                   
            $('table').find("input[type='checkbox']").prop('checked',false);
            
            }
       }else{    
            
             if ($(this).is(":checked")) {
         
                $(this).closest('tr').addClass("warning");
            
             } else {
        
              $(this).closest('tr').removeClass("warning");
              
             }
             
             
             if($("input[type=checkbox]:checked").not('#selectAll').length==0){
          
                $('#selectAll').prop('checked',false);
             
       
}else if($("input[type='checkbox']:checked").not('#selectAll').length==$("input[type='checkbox']").not('#selectAll').length){
       
         $('#selectAll').prop('checked',true);
       }
       
       }
             
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-hover table-condensed">
    <tr>
        <th><input type="checkbox" id="selectAll"/></th>
        <th>Title</th>
        <th>Title</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
</table>

【讨论】：

注意这不会取消选择selectAll，如果在之前选择了所有行时未选中所选行

【解决方案3】：

https://fiddle.jshell.net/w9zkwb1f/5/

$(document).ready(function () {
 
  $("#selectAll").click(function(){
    if($(this).is(':checked')){
      $("input[type='checkbox']").prop("checked",true);
      $("table tr").addClass("warning");
    }
    else{
      $("input[type='checkbox']").prop("checked",false);
      $("table tr").removeClass("warning");
    }
  });

    $("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("warning");
        } else {
            $(this).closest('tr').removeClass("warning");
            $("#selectAll").prop("checked",false).removeClass("warning");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-hover table-condensed">
    <tr>
        <th><input type="checkbox" id="selectAll"/></th>
        <th>Title</th>
        <th>Title</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
</table>

【讨论】：

不管理 selectAll 的类或取消选中 selectAll 时取消选中一行