How to add class to all rows

Question

In given example, I can select/deselect each row on clicking on checkbox from td, but how to select/deselect all rows on click id="selectAll" from th

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)

Possible duplicate of [Select All Checkbox](https://stackoverflow.com/questions/7259335/select-all-checkbox) — André Dion, Jul 07 '17 at 11:58

charlietfl · Accepted Answer · 2017-07-07T12:28:17.283

Should cover all cases including switching selectAll appropriately when other inputs are selected/unselected

   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

JYoThI · Answer 2 · 2017-07-08T04:08:50.177

You need to check the clicked checkbox is selectAll or not like this $(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>

Note this doesn't unselect `selectAll` if a selected row is unchecked when all rows previously selected — charlietfl, Jul 07 '17 at 12:35

zuluk · Answer 3 · 2017-07-07T12:09:46.560

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>

Doesn't manage the classes for selectAll or uncheck selectAll when a row is unselected — charlietfl, Jul 07 '17 at 12:03

How to add class to all rows

3 Answers3