変化（のSelectAll）のクリックで複数のテーブル行クラスのチェックボックス

Question

は私が複数の行を持つテーブルを持っていると私は選択のすべてのチェックボックスが

をクリックしたときに、各行のためのTRにクラスを追加し、削除したいですselect allチェックボックスをクリックすると、trクラスの行をすべて一度に変更したい（trクラスの追加と削除）。私は、トップのチェックボックスがクリックされたときにすべてのチェックボックスを選択するために働く次のjavascriptを持っています。tr行のチェックボックスをクリックすると、単一の行クラスが変更されます

すべてのチェックボックス選択されており、また、TRクラスのテーブル内の行が、これは他のすべてのcheckboxs

を選択をクリックしたときに、チェックボックスのための私のjavascriptです

以下のJavaScriptだけでハイライト行のように、同時に同様に変更されています1つのチェックボックスをクリックすると表の行もハイライト表示されます

<script type="text/javascript"> 
$(function() { 
    $('.chk_boxes').click(function() { 
     $('.chk_boxes1').prop('checked', this.checked); 
    }); 

    // Highlight row when checkbox is checked 
    $('.table-inbox').find('tr > td:first-child').find('input[type=checkbox]').on('change', function() { 
     if ($(this).is(':checked')) { 
      $(this).parents('tr').addClass('warning'); 
     } 
     else { 
      $(this).parents('tr').removeClass('warning'); 
     } 
    }); 
}); 

と、次のHTMLテーブル

<div class="btn-group navbar-btn pl-20"> 
    <input class="chk_boxes" type="checkbox"> 
</div> 

<div class="btn-group navbar-btn"> 
    <button type="submit" onclick="return confirm('Are you sure you want to delete the messages?');" class="btn btn-default"><span class="position-right">Delete</span></button> 
</div> 

<table> 
<tbody> 

    <tr class=""> 
     <td class="table-inbox-checkbox"> 
      <div class="checker"><span><input class="chk_boxes1" value="5" name="id[]" type="checkbox"></span></div> 
     </td> 
     <td class="table-inbox-image"> 
      <span class="btn bg-t btn-rounded btn-icon btn-xs"> 
       <span class="letter-icon">T</span> 
      </span> 
     </td> 
     <td class="table-inbox-name"><a href="#"><div class="letter-icon-title">test user3</div></a></td> 
     <td class="table-inbox-message"> 
      <div class="table-inbox-subject"> <a href="#" class="text-primary">message number 1</a></div> 
      <span class="table-inbox-preview">hi are you ok for a something</span> 
     </td> 
     <td class="table-inbox-attachment"></td> 
     <td class="table-inbox-time"> 21st Mar, 20:04 </td> 
    </tr> 

    <tr class=""> 
     <td class="table-inbox-checkbox rowlink-skip"> 
      <div class="checker"><span><input class="chk_boxes1" value="6" name="id[]" type="checkbox"></span></div> 
     </td> 
     <td class="table-inbox-image"> 
      <span class="btn bg-t btn-rounded btn-icon btn-xs"> 
       <span class="letter-icon">T</span> 
      </span> 
     </td> 
     <td class="table-inbox-name"><a href="#"><div class="letter-icon-title">test user5</div></a></td> 
     <td class="table-inbox-message"> 
      <div class="table-inbox-subject"> <a href="#" class="text-primary">Message number 2</a></div> 
      <span class="table-inbox-preview">i am sending this message to you</span> 
     </td> 
     <td class="table-inbox-attachment"></td> 
     <td class="table-inbox-time"> 20st Mar, 21:04 </td> 
    </tr> 

</tbody> 
</table> 

Answer 1

私が正しくあなたを理解していれば、あなただけのトップチェックボックスがクリックされたときに、すべてのテーブルの行を取得し、それらにクラスをトグルする必要があります。

$(function() { 
    $('.chk_boxes').click(function() { 
     $('.chk_boxes1').prop('checked', this.checked); 
     $('tbody > tr').toggleClass('tr', this.checked); 
    }); 

    // Highlight row when checkbox is checked 
    $('.table-inbox').find('tr > td:first-child').find('input[type=checkbox]').on('change', function() { 
     if ($(this).is(':checked')) { 
      $(this).parents('tr').addClass('warning'); 
     } 
     else { 
      $(this).parents('tr').removeClass('warning'); 
     } 
    }); 
}); 

Answer 2

おそらくtheadにすべてのチェックボックスを追加する必要があります。その変更を確認するだけです。大まかなサンプルがあります。

ここはゴッチャー!!!あなたがプログラマチックにチェックボックスを設定した場合、そのチェックボックスでchange（）イベントが発生していません。私はちょうどあなたがチェックしたすべての要素に対してtrigger（）を呼び出すだけで、コードを編集しました。お役に立てれば！

EDIT：if（）を使用するのではなく、後続のすべてのチェックボックスの状態をselectAllチェックボックスの状態に設定するだけで、selectAllコードをクリーンアップしました。 ******* ` -

$(function() { 
 
    $('.chk_boxes').click(function() { 
 
    $('.chk_boxes1').prop('checked', this.checked); 
 
    }); 
 

 
    // Highlight row when checkbox is checked 
 
    $('.table-inbox').find('tr > td:first-child').find('input[type=checkbox]').on('change', function() { 
 
    if ($(this).is(':checked')) { 
 
     $(this).parents('tr').addClass('warning'); 
 
    } else { 
 
     $(this).parents('tr').removeClass('warning'); 
 
    } 
 
    }); 
 

 
    $("#checkAll").on("click", function() { 
 
     $("tbody input[type='checkbox']") 
 
     .prop("checked", $(this).prop("checked")) 
 
     .trigger("change"); 
 
    }) 
 
});

.warning { 
 
    background-color: #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn-group navbar-btn"> 
 
    <button type="submit" onclick="return confirm('Are you sure you want to delete the messages?');" class="btn btn-default"><span class="position-right">Delete</span></button> 
 
</div> 
 

 
<table class="table-inbox"> 
 
    <thead> 
 
    <td><label for="checkAll">Check All: </label><input type="checkbox" id="checkAll"></td> 
 
    </thead> 
 
    <tbody> 
 

 
    <tr class=""> 
 
     <td class="table-inbox-checkbox"> 
 
     <div class="checker"><span><input class="chk_boxes1" value="5" name="id[]" type="checkbox"></span></div> 
 
     </td> 
 
     <td class="table-inbox-image"> 
 
     <span class="btn bg-t btn-rounded btn-icon btn-xs"> 
 
       <span class="letter-icon">T</span> 
 
     </span> 
 
     </td> 
 
     <td class="table-inbox-name"> 
 
     <a href="#"> 
 
      <div class="letter-icon-title">test user3</div> 
 
     </a> 
 
     </td> 
 
     <td class="table-inbox-message"> 
 
     <div class="table-inbox-subject"> <a href="#" class="text-primary">message number 1</a></div> 
 
     <span class="table-inbox-preview">hi are you ok for a something</span> 
 
     </td> 
 
     <td class="table-inbox-attachment"></td> 
 
     <td class="table-inbox-time"> 21st Mar, 20:04 </td> 
 
    </tr> 
 

 
    <tr class=""> 
 
     <td class="table-inbox-checkbox rowlink-skip"> 
 
     <div class="checker"><span><input class="chk_boxes1" value="6" name="id[]" type="checkbox"></span></div> 
 
     </td> 
 
     <td class="table-inbox-image"> 
 
     <span class="btn bg-t btn-rounded btn-icon btn-xs"> 
 
       <span class="letter-icon">T</span> 
 
     </span> 
 
     </td> 
 
     <td class="table-inbox-name"> 
 
     <a href="#"> 
 
      <div class="letter-icon-title">test user5</div> 
 
     </a> 
 
     </td> 
 
     <td class="table-inbox-message"> 
 
     <div class="table-inbox-subject"> <a href="#" class="text-primary">Message number 2</a></div> 
 
     <span class="table-inbox-preview">i am sending this message to you</span> 
 
     </td> 
 
     <td class="table-inbox-attachment"></td> 
 
     <td class="table-inbox-time"> 20st Mar, 21:04 </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>