Html5 support having SelectAll for checkboxes

Question

i have the following Razor view inside my asp.net mvc web application:-

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)

Which will display a checkboxes inside table rows. so does Html-5 support having SelectAll checkbox , for selecting all the checkboxes that have the same name or id ? Thanks

Edit i add the following selectAll checkbox:-

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

                                /> 

and i wrote the following script:-

$('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";

        }
    }
});

but it did not work,, i mean the checkboxes will never get checked/unchekced .. can anyone adivce?

Answer 1

Add a checkbox for Select All / Deselect All

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

Add a css class named "checkBoxClass"

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

In jquery

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