HTML5支持具有SelectAll的復選框

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的復選框？ 謝謝

編輯我添加以下全選復選框：-

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