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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

或稍短，请看这里fiddle（已编辑）：

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

该函数同时执行这两项操作，设置标记并将类名分配/删除到父级 - tr。事实证明，.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

这也可用于实现相同的

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

单击复选框将类添加到所有类

3 个答案: