全选复选框

时间:2019-01-28 07:02:15

标签: jquery asp.net-mvc-4

我必须创建“全选复选框”选项,当我选择计数的每个复选框都起作用时,它可以工作,但是当我在ASP.NET MVC中实现时,当“全选”选项不起作用时,这是我的代码 javascript

var countChecked = function () {
        var n = $('input[name="DocNames"]:checked').length;
        $("#span").text(n + (n === 1 ? " document is" : " documents are") + " checked!");
    };
    countChecked();
    $('input[name="DocNames"]').on("click", countChecked);

    $('#select_all').click(function (e) {
        $(this).closest('table').find('td input[name="DocNames"]').prop('checked', this.checked);
    })

html代码

<table class="table">
<tr>
    <th>Documnet Name</th>
</tr>
<tr>
    <td><label><input type="checkbox" name="select_all" id="select_all" />Select All</label></td>
</tr>
@if (Model.Documents != null)
{
    foreach (var item in Model.Documents)
    {
        <tr>
            <td>
                <label>
                    <input type="checkbox" name="DocNames" value="@item.DocumentName.Trim()" />
                    @item.DocumentName.Trim()
                </label>
            </td>
        </tr>
    }
}
else
{

    <tr>
        <td>@ViewBag.NoDocuments</td>
    </tr>
}

<div id="span"></div>

1 个答案:

答案 0 :(得分:2)

如果您尚未使用@Andreas的建议解决问题(这是正确的答案),我将以一种答案格式再次表达它:

在您的代码中,您在每个复选框的单击事件上调用了countChecked()。因此,countChecked()会执行它的工作。

但是在SelectAll复选框的事件处理程序中,您忘记了再次调用countChecked()。

因此,您必须在代码末尾调用它,就像这样:

$('#select_all').click(function (e) {
    $(this).closest('table').find('td input[name="DocNames"]').prop('checked', this.checked);
    countChecked();
})

或者,更笨拙的是,触发任何复选框的点击事件。

但是以上是最好的。