如何将类添加到所有行

Question

在给定的示例中，我可以在点击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)

Answer 1

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

selectAll

的 DEMO

Answer 2

您需要查看点击的复选框selectAll或not，例如$(this).attr('id')=='selectAll'

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 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>