Question

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

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

        }
    }
});

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

Answer 1

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

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

添加一个名为＆＃34; checkBoxClass＆＃34;

的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'));
    });
});

Html5支持SelectAll复选框

1 个答案: