How do I select all checkbox across all the pages on the cli

Question

Hello,

       How do I select all checkbox across all the pages on the click of a ‘check all’ checkbox in JavaScript or jQuery? Currently only the current page records get selected.

       Here is my code. please give me the solution.

 

@model PagedList.IPagedList<SDMS_MVC_WEB.Areas.Admin.Models.MobileStructureListModel>

@using PagedList.Mvc;

<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{

ViewBag.Title = "Index";

Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";

}

<h2>Mobile Structure</h2>

<div class="row">

<div class="col-md-12">

<div class="col-md-8">

&nbsp;

</div>

<div class="col-md-2">

<button type="button" id="btnDisMobileStructure" class="btn btn-primary pull-right">&nbsp; DisAllow Mobile</button>

</div>

<div class="col-md-2">

<button type="button" id="btnMobileStructure" class="btn btn-primary pull-right">&nbsp; Allow Mobile</button>

</div>

</div>

</div>

<div class="row">

<div class="col-md-12">

&nbsp;

</div>

</div>

<div class="row">

<div class="col-md-12" id="tableStructures">

<table class="table table-striped table-bordered">

<tr>

<th style="text-align:center"><input type="checkbox" id="ckbCheckAll" value="false" /></th>

<th>

@Html.ActionLink("Structure Number", "Index", new { sortOrder = ViewBag.StructureNumber })

</th>

<th>

@Html.ActionLink("Structure Name", "Index", new { sortOrder = ViewBag.StructureName })

</th>

<th>

@Html.ActionLink("Facility Code", "Index", new { sortOrder = ViewBag.ParkCode })

</th>

<th>

@Html.ActionLink("Facility Name", "Index", new { sortOrder = ViewBag.ParkName })

</th>

<th>

@Html.ActionLink("Update Type Code", "Index", new { sortOrder = ViewBag.UpdateTypeCode })

</th>

<th>

@Html.ActionLink("Is Mobile Structure", "Index")

</th>

</tr>

@foreach (var item in Model)

{

var style1 = (@item.Archived == true) ? "(Archived)" : "";

<tr style="@style1">

<td style="text-align:center">

@Html.CheckBoxFor(modelitem => item.IsSelectdRow, new { @class = "checkboxclass", @data_strno = item.StructureNumber, @id = item.Id })

<input type="hidden" id="@item.Id" data-strno="@item.StructureNumber" />

</td>

<td>

@Html.DisplayFor(modelItem => item.StructureNumber) @style1

</td>

<td>

@Html.DisplayFor(modelItem => item.StructureName)

</td>

<td>

@Html.DisplayFor(modelItem => item.ParkCode)

</td>

<td>

@Html.DisplayFor(modelItem => item.ParkName)

</td>

<td>

@Html.DisplayFor(modelItem => item.UpdateTypeCode)

</td>

@if (item.IsMobileStructure == false)

{

<td>

No

</td>

}

else

{

<td>

Yes

</td>

}

</tr>

}

</table>

</div>

</div>

<div class="row">

<div class="col-md-6">

<div class="dataTables_info">

Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

</div>

</div>

<div class="col-md-6 pull-right">

<div class="dataTables_paginate paging_bootstrap pull-right">

@Html.PagedListPager(Model, page => Url.Action("MobileStructure", new { page, sortOrder = ViewBag.CurrentSort }))

</div>

</div>

</div>

<script type="text/javascript">

$(document).ready(function () {

$("#tableStructures").on("click", "#ckbCheckAll", function () {

if (this.checked) {

$("#tableStructures").find('input[type="checkbox"].checkboxclass').each(function (i, k) {

$(this).prop("checked", true);

});

}

else {

$("#tableStructures").find('input[type="checkbox"]').each(function (i, k) {

$(this).prop("checked", false);

});

}

});

$("#tableStructures").on('change', "input[type='checkbox']", function () {

if ($(this).is(":checked")) {

} else {

$("#ckbCheckAll").prop("checked", false);

}

});

});

</script>