Takács Zoltán Takács Zoltán - 3 months ago 5
HTML Question

Add class to all <tr> by clicking checkbox

With this code, i get all the checkboxes checked:

$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
});


With this, i add a class to the element, where the checkbox is in.

$(function()
{
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
});


How can i add that class, in my first code, to all the elements, by clicking select all checkboxes?

Answer

$(".checkAllCheckboxes").click(function()
{
    $('input:checkbox').not(this).prop('checked', this.checked);
    $('input:checkbox').each(function() {
      if($(this).is(":checked")) 
    {
        $(this).parents('tr').addClass("checkbox_checked_row");
    } 
    else 
    {
        $(this).parents('tr').removeClass("checkbox_checked_row");
    }
         
    });;
});

$('.table_row_checkbox').on('change',function(){
    if($(this).is(":checked")) 
    {
        $(this).parents('tr').addClass("checkbox_checked_row");
    } 
    else 
    {
        $(this).parents('tr').removeClass("checkbox_checked_row");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered list">
  <thead>
    <tr>
      <td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
      <td style="text-align: center;">ID</td>
      <td class="left">Név</td>
      <td class="left">E-mail</td>
      <td class="left">Telefonszám</td>
      <td style="text-align: center;">Dátum</td>
      <td style="text-align: center;">Státusz</td>
      <td class="right">Műveletek</td>
    </tr>
  </thead>
  <tbody>
    <tr id="sor55">
      <td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
      <td style="text-align: center;">55</td>
      <td class="left">Nagy Andrea</td>
      <td class="left">andi99@gmail.com</td>
      <td class="left">06 70 8382 11</td>
      <td style="text-align: center;">2016-08-13 20:33</td>
      <td style="text-align: center; color:#ff0000">Új üzenet</td>
      <td class="right"><a href="beerkezett-uzenet.php?id=55"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
    </tr>
    <tr id="sor54">
      <td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
      <td style="text-align: center;">54</td>
      <td class="left">Nagy Andrea</td>
      <td class="left">andi99@gmail.com</td>
      <td class="left">06 70 8382 11</td>
      <td style="text-align: center;">2016-08-13 20:33</td>
      <td style="text-align: center; color:#ff0000">Új üzenet</td>
      <td class="right"><a href="beerkezett-uzenet.php?id=54"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span></a> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
    </tr>
  </tbody>
</table>