通過點擊複選框

Question

有了這個代碼添加類所有，我得到的所有的複選框選中：

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

有了這個，我添加一個類的元素，其中的複選框是

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

。

如何在我的第一個代碼中將該類添加到所有元素，方法是單擊全選複選框？

---

對不起，我不是那個意思。

我生成的表的代碼如下所示：

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

在第一，那裏有選擇的所有複選框。

Answer 1

$(".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>

Answer 2

或者稍短，在這裏看到fiddle（編輯）：

$(".checkAllCheckboxes").click(function() 
{ 
    $(this).closest('table').find('input:checkbox').prop('checked', this.checked) 
    .closest('tr').toggleClass('selected',this.checked) 
}); 

功能也都設置了刻度線和受讓人/刪除類名的父 - tr s。事實證明，.not(this)及其後的.addSelf()甚至不是達到預期效果所必需的。因此，我再次刪除它們（「少寫，多做」）。

• .closest()是在有利的情況下在有可能被嵌套的表格（.parents()會發現所有的父表）
• .closest('tr')讓你想工作的tr秒。

那麼，上面並沒有完全做到。點擊「正常」複選框時，它不會執行tr級別的處理。該following作用：

$('input:checkbox').click(function() 
{ var jqobj=$(this);    
    if (jqobj.hasClass('checkAllCheckboxes')) // extend the selection 
    { jqobj=jqobj.closest('table').find('input:checkbox'); } 
    jqobj.prop('checked', this.checked).closest('tr') 
     .toggleClass('selected',this.checked); 
}); 

Answer 3

這也可以用來acheive相同

$(".checkAllCheckboxes").click(function(){ 

if($(this).is(':checked')){ 
     $(this).parents('tr').addClass('checked'); 
     $('tbody tr').addClass('checked') 
     $('tbody input[type="checkbox"]').prop('checked',true) 
     } 
    else{ 
     $(this).parents('tr').removeClass('checked'); 
     $('tbody tr').removeClass('checked') 
     $('tbody input[type="checkbox"]').prop('checked',false)  
    } 
});