Html5支持复选框的SelectAll

Html5 support having SelectAll for checkboxes

本文关键字：SelectAll 复选框 支持 Html5      更新时间：2023-09-26

我有以下Razor视图在我的asp.net mvc web应用程序:- 

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的复选框?由于

编辑我添加了以下的selectAll复选框:-

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

但是它没有工作，我的意思是复选框永远不会被选中/取消选中…有人能给点建议吗?

为全选/取消全选添加一个复选框

<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'));
    });
});
相关文章：