javascript - Html5 支持对复选框进行 SelectAll

Question

我的 asp.net mvc Web 应用程序中有以下 Razor View :-

foreach (var item in Model) {
    <tr id="@item.RouterID">
        <td>

 <input type="checkbox" name="CheckBoxSelection" 
                               value="@item.RouterID.ToString()"
                                /> 
@Html.ActionLink("Edit", "Edit","Router", new { id=item.RouterID },null)

这将在表行内显示一个复选框。那么 Html-5 是否支持 SelectAll 复选框，用于选择具有相同名称或 id 的所有复选框？谢谢

编辑我添加以下全选复选框:-

<input type="checkbox" 
                               name="selectAll"
                id="selectAll" 

                                /> 

我写了以下脚本:-

$('body').on("change", "#selectAll", function () {
    var checkflag = "false";
    var checkboxes = document.getElementsByName('CheckBoxSelection');
    function check() {
        if (checkflag == "false") {
            for (i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = true;
            }
            checkflag = "true";

        } else {
            for (i = 0; i < checkboxes.length; i++) {
                field[i].checked = false;
            }
            checkflag = "false";

        }
    }
});

但它不起作用，我的意思是复选框永远不会被选中/取消选中..任何人都可以提供建议吗？

Answer 1

添加全选/取消全选复选框

<input type="checkbox" id="selectAll" name="selectAll" />

添加一个名为“checkBoxClass”的 CSS 类

foreach (var item in Model) {
    <tr id="@item.RouterID">
        <td>

 <input class='checkBoxClass' type="checkbox" name="CheckBoxSelection" 
                               value="@item.RouterID.ToString()"
                                /> 
@Html.ActionLink("Edit", "Edit","Router", new { id=item.RouterID },null)
}

在jquery中

 $(document).ready(function () {
    $("#selectAll").click(function () {
        $(".checkBoxClass").prop('checked', $(this).prop('checked'));
    });
});