通过点击复选框

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