Hi,
I have a html table in my view. like
<table id="dtsResult" width="100%" class="table table-striped table-bordered"></table>
i have a jquery function that return jason result. after this i bind this data to my table. it works fine . but now i want to select all check-box from header checkbox. here is my code:
function fetchData(whichPage) {
var request = $.ajax({
//url: "http://ns1.ownership-data.com/new/ODBAppSrv.asmx/SearchResultsJson",
url: '@Url.Action("SearchResultsJson", "NewResult")',
method: "POST",
data: { "page": whichPage }
});
request.done(function (data) {
var items = [];
$.each(data, function (key, val) {
var bgClass = (key % 2 == 0) ? "search-result-bg" : "";
var item = '<tr class="' + bgClass + '">';
item += '<td><input type="checkbox" id=' + val["RecordID"] + ' value=' + val["RecordID"] + ' name="chkres" class="chkres" /> </td>';
// item += '<td></td>';
item += '<td>' + val["RecordID"] + '</td>';
item += '<td>' + val["UnitNo"] + '</td>';
item += '<td>' + val["StreetNo"] + ' ' + val["StreetName"] + ' ' + val["Suburb"] + '</td>';
item += '<td>' + val["O_SurName"] + '<br/>' + val["O_StreetNo"] + ' ' + val["O_StreetName"] + ' ' + val["O_Suburb"] + '</td>';
item += '</tr>';
items.push(item);
});
if (items.length > 0) {
var result = '<div id="loadingOverlay"></div><tr class="search-result-heading">';
result += '<td><input type="checkbox" id="CheckAllRes" class="allres" />Select All</td>';
result += '<td>Record ID</td>';
result += '<td>Unit</td>';
result += '<td>Property Details</td>';
result += '<td>Owners Details</td>';
result += '</tr>';
result += items.join("");
$("#dtsResult").html(result);
} );
}
now here is my jquery function but not works properly.
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
$('.allres').on("click", function () {
var chk = $(this).is(':checked');
alert(chk);
$(".chkres", "#dtsResult").each(function () {
if (chk) {
$(".chkres", "#dtsResult").prop("checked", true);
}
else {
$(".chkres", "#dtsResult").prop("checked", false);
}
});
}); });
</script>
How i do this.
Thanks.