Wie Klasse auf alle Zeilen

Question

Im gegebenen Beispiel hinzuzufügen, kann ich/wählen jede Zeile deaktivieren Sie auf Kontrollkästchen aus td auf klicken, aber wie alle Zeilen auf Klick id="selectAll" von th

JS aktivieren/deaktivieren:

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

Answer 1

überprüfen sollten, für alle Fälle, einschließlich Schalt selectAll geeignet, wenn andere Eingänge sind ausgewählt/nicht ausgewählt

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

Answer 2

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>

Answer 3

Sie müssen das geklickt Checkbox ist selectAll oder not wie diese $(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>