Question

我在jQuery中相当新。基本上我有几个表，当检查表的所有元素时，我必须为每个表选中最后一个复选框。这是一个简单的演示，是我想要的结果。
演示：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/

我将复选框与名为group的类分隔开来，将底行的复选框与parent分开

查找包含类.group的已检查输入的长度。

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

当前表格中所有基础复选框的长度 -

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

这是如何运作的 -

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

加载文件

现在，on load事件直接在每个表中检查上面的逻辑。它迭代每个表并查找所有已选中和未选中的复选框，并比较它们的长度是否相等。

$('.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 load事件 -

$('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/

我已经将一个类应用于具有复选框的TR＆＃34;＆＃34;除了最后一个TR。这是我的代码

＆＃13;

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

＆＃13;

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

＆＃13;

选中所有复选框后自动检查表

3 个答案:

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