选中所有复选框时自动选中 table

Question

我是 jQuery 的新手。基本上我有几个 table，当 table 的所有元素都被选中时，我必须为每个 table 勾选最后一个复选框。这是一个简单的演示，它是我想要的结果。
演示：Fiddle

到目前为止，这就是我所做的，但它仍然检查了我的最后一个复选框，尽管该字段的元素并未全部选中。

$('table tr:last-child input:checkbox').closest('table').find('input:checkbox').each(function() {
        if ($(this).is(":checked")) {
           $('table tr:last-child input:checkbox').prop('checked',true);
        }
});

Answer 1

试试这个：- http://jsfiddle.net/3rc1hwk4/9/

JS:-

//change event handler for the checkbox in the last tr 

$('table tr:last-child input:checkbox').change(function () {
    //use closest to find the table containing the changed checkbox and set the checked value for each checkbox in that table to the new status
    $(this).closest('table').find('input:checkbox').prop('checked', this.checked);
});

$('table tr:last-child input:checkbox').closest('table').find('input:checkbox').each(function () {
    if ($(this).is(":checked") && !$(this).is(":last-child")) {
        $('table tr:last-child input:checkbox').prop('checked', true);
    }
});

Answer 2

看看这个演示- http://jsfiddle.net/5h25ngvw/

我将复选框 class 命名为 group ，底部一行的复选框命名为 parent

查找包含 class .group.

的已检查输入 的长度

$('table').find('.group:checked').length

当前table-

中所有底层复选框的长度

$('table').find('.group').length

这是如何工作的-

假设您有 12 个复选框，其中 8 个被选中，现在您检查所有复选框的长度为 if(12==8)?then check the bottom one :else remained unchecked.

正在加载文档

现在加载事件直接检查每个 table 与上面相同的逻辑。它遍历每个 table 并找到所有选中和未选中的复选框，并比较它们的长度是否相等。

$('.group').change(function(){
        if($(this).closest('table').find('.group:checked').length==$(this).closest('table').find('.group').length){
        $(this).closest('table').find('input[class="parent"]').prop('checked','checked')
        }
        else
        {
       $(this).closest('table').find('input[class="parent"]').prop('checked',false);
        }

    });

onload 复选框加载事件-

$('table').each(function(){
    if($(this).find('input.group').length==$(this).find('input:checked').length){
    $(this).find('input.parent').prop('checked',true);
    }
});

此外，我会减少代码并用最小化的代码更新给你

Answer 3

试试这个 Fidle https://jsfiddle.net/3rc1hwk4/28/

我已将 class 应用于具有复选框“”的 TR，但最后一个 TR 除外。这是我的代码

//change event handler for the checkbox in the last tr 
$('table tr:last-child input:checkbox').change(function(){
    //use closest to find the table containing the changed checkbox and set the checked value for each checkbox in that table to the new status
    $(this).closest('table').find('input:checkbox').prop('checked', this.checked);
}); 
$('table tr.checkboxes td input:checkbox').change(function(){
    var all_checked = true;
    $(this).closest('table').find('tr.checkboxes input:checkbox').each(function () {
        if (!$(this).is(":checked")) {
            all_checked = false;    
        }
    });
    if (all_checked) {
        $(this).closest('table').find('tr:last-child input:checkbox').prop('checked',true);
    } else {
        $(this).closest('table').find('tr:last-child input:checkbox').prop('checked',false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <td>System Setting</td>
        <td>(View Action)</td>
        <td>(Add Action)</td>
        <td>(Update Action)</td>
        <td>(Delete Action)</td>
    </tr>
    <tr class="checkboxes">
        <td>1. Manage Main Module</td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
    <tr class="checkboxes">
        <td>2. Manage Sub Module</td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
        <tr class="last-checkbox">
            <td colspan="5" align="right">
                <input type="checkbox">
            </td>
        </tr>
    </tr>
</table>
<table border="1" id="second-table">
    <tr>
        <td>Manage Setting</td>
        <td>(View Action)</td>
        <td>(Add Action)</td>
        <td>(Update Action)</td>
        <td>(Delete Action)</td>
    </tr>
    <tr class="checkboxes">
        <td>1. Manage Setting</td>
        <td>
            <input type="checkbox" checked>
        </td>
        <td>
            <input type="checkbox" checked>
        </td>
        <td>
            <input type="checkbox" checked>
        </td>
        <td>
            <input type="checkbox" checked>
        </td>
        <tr class="last-checkbox">
            <td colspan="5" align="right">
                <i>I have to make this checkbox checked when all of the elements are checked</i><input type="checkbox" id="MYID" checked>
            </td>
        </tr>
    </tr>
</table>
            
            More and More tables.......

选中所有复选框时自动选中 table

Auto checked table when all checkboxes are checked

checkbox

jquery

试试这个：- http://jsfiddle.net/3rc1hwk4/9/