Javascript 单击（selectall）复选框更改多表行类

我有一个包含多行的表，我想在单击全选复选框时为每行向tr添加和删除一个类

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

我想在单击全选复选框时一次更改所有tr类行（添加和删除tr类）。我有下面的javascript，它可以在单击顶部复选框时选择所有复选框，并在单击tr行中的复选框时更改单行类

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

我需要的功能是，当单击顶部复选框时，所有复选框都被选中，同时表行中的tr类也被更改，就像下面突出显示的行javascript一样

这是我的javascript，用于选中复选框时选择所有其他复选框

单击单个复选框时，它还会高亮显示一个表行

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

$（函数（）{
$（'.chk_框'）。单击（函数（）{
$（'.chk_boxes1'）.prop（'checked'，this.checked）；
});
//选中复选框时高亮显示行
$（'.table inbox'）.find（'tr>td:first child'）.find（'input[type=checkbox]）.on（'change'，function（）{
如果（$（this）.is（':checked'））{
$（this.parents（'tr'）.addClass（'warning'）；
}
否则{
$（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>

删除
T
嗨，你想喝点什么吗
3月21日，20:04
T
我正在给你发这个信息
3月20日，21:04

如果我理解正确，只需在单击顶部复选框时抓取所有表行，并在其上切换类即可

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

---

您需要添加一个全选复选框，可能是在thead中，只需观察对该复选框的更改即可。这是一个粗略而现成的样品

这里有一个抓到你了！！！如果以编程方式设置该复选框，则未触发该复选框上的change（）事件。我对代码进行了编辑，只需对我刚刚检查过的所有元素调用trigger（）。希望这有帮助

编辑：清理了selectAll代码——我没有使用if（），而是将所有后续复选框的状态设置为selectAll复选框的状态

$（函数（）{
$（'.chk_框'）。单击（函数（）{
$（'.chk_boxes1'）.prop（'checked'，this.checked）；
});
//选中复选框时高亮显示行
$（'.table inbox'）.find（'tr>td:first child'）.find（'input[type=checkbox]）.on（'change'，function（）{
如果（$（this）.is（':checked'））{
$（this.parents（'tr'）.addClass（'warning'）；
}否则{
$（this.parents（'tr'）.removeClass（'warning'）；
}
});
$（“#checkAll”）。在（“单击”，函数（）上）{
$（“t正文输入[type='checkbox']”）
.prop（“选中”），$（此）.prop（“选中”））
.触发（“变更”）；
})
});
。警告{
背景色：#ccc
}

删除
全部选中：
T
嗨，你想喝点什么吗
3月21日，20:04
T
我正在给你发这个信息
3月20日，21:04
您的html文档中没有任何
表格收件箱
类，只有
表格收件箱-******
。因此，脚本的第二部分没有效果。