【问题标题】:select all check box not checked when click on it全选复选框单击时未选中
【发布时间】:2014-03-21 07:12:01
【问题描述】:

我想在选中全选复选框时检查所有复选框,但在我的情况下,复选框是动态生成的。当我单击全选复选框时,所有复选框都被选中,但全选复选框未选中。
javascript

 function selectAll() {
        alert("enter selectall");
        $('.checkall').prop('checked', isChecked('selectall'));
    }

    function isChecked(checkboxId) {
        alert(checkboxId);
        alert("enterischecked");
        var id = '#' + checkboxId;
        return $(id).is(":checked");
    }


    function resetSelectAll() {
        alert("resetselectall");
        // if all checkbox are selected, check the selectall checkbox
        // and viceversa
        if ($(".checkall").length == $(".checkall:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }
    }

HTML 代码

 <body>
<table id="notificationsTableId" style="width: 1744px;">
    <thead>
        <tr role="row">
            <th rowspan="1" colspan="1" style="width: 30px;" aria-label="">
                <input type="checkbox" id="selectall" onclick="selectAll();">Select all</input>
            </th>
            <th tabindex="0" rowspan="1" colspan="1" style="width: 203px;">Type</th>
            <th tabindex="0" rowspan="1" colspan="1" style="width: 354px;">Status</th>
        </tr>
    </thead>
    <tbody role="alert">
        <tr class="results-table-row odd">
            <td align="center">
                <input type="checkbox" class="checkall" name="selectedId" value="" onclick="resetSelectAll();" />
            </td>
            <td>Stop Noted Record</td>
            <td>Closed (No investigation required)</td>
        </tr>
        <tr class="results-table-row even">
            <td align="center">
                <input type="checkbox" class="checkall" name="selectedId" value="" onclick="resetSelectAll();" />
            </td>
            <td>Stop Noted Record</td>
            <td>Open (New)</td>
        </tr>
        <tr class="results-table-row even odd">
            <td align="center" class=" ">
                <input type="checkbox" class="checkall" name="selectedId" value="" onclick="resetSelectAll();" />
            </td>
        </tr>
    </tbody>
</table>

注意

i am using ie8

【问题讨论】:

  • 你应该提供渲染的 HTML 标记,也许还有一个 jsfiddle
  • @A.Wolff 我现在更改了 html

标签: javascript jquery html checkbox


【解决方案1】:

当它被 onClick 处理程序调用时:

function selectAll() {
        alert("enter selectall");
        $('.checkall').prop('checked', isChecked('selectall'));
    }

selectall 复选框当前未被选中。此功能正在立即重置,因此该框将保持未选中状态。 “检查”实际上发生在 onClick 例程返回之后

这可以解决问题:

function selectAll() {
        alert("enter selectall");
        $('.checkall').prop('checked', !(isChecked('selectall')) );
    }

【讨论】:

    猜你喜欢
    • 2015-04-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-13
    • 2021-02-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多