How to select all checkboxes from table using javascript
Question
Script:-
<script type="text/javascript">
$(document).ready(function () {
$("#cbSelectAll").click(function () {
if (this.checked) {
$(':checkbox').each(function () {
this.checked = true;
var selectall = document.getElementsByClassName(".checkBoxClass");
var cid = $(this).attr('id');
console.log('cid' + cid);
var hidSelectAll = document.getElementById("hfSelectAll");
var hidCustomer = document.getElementById("hfCustomerID");
hidCustomer = '';
var str = 'Select All';
hidSelectAll.value = str;
console.log(hidSelectAll);
});
$("#GridRows .checkBoxClass").change(function () {
if (!$(this).prop("checked")) {
$("#cbSelectAll").prop("checked", false);
var cid = $(this).attr('id');
console.log('cid' + cid);
var hidSelectAll = document.getElementById("hfSelectAll");
var str = 'Select All + unselected values';
hidSelectAll.value = str;
console.log(hidSelectAll);
}
});
}
else {
$(':checkbox').each(function () {
this.checked = false;
var hidSelectAll = document.getElementById("hfSelectAll");
var str = 'UnSelect All';
hidSelectAll.value = str;
console.log(hidSelectAll);
});
$(".checkBoxClass").change(function () {
if (!$(this).prop("checked")) {
$("#cbSelectAll").prop("checked", false);
var hidSelectAll = document.getElementById("hfSelectAll");
var str = 'unSelect All + selected values';
hidSelectAll.value = str;
console.log(hidSelectAll);
}
});
}
});
});
</script>
HTML:-
<body>
<h4>Number Of Records - <span>@ViewBag.ItemCount</span> </h4>
<div class="table-responsive" style="padding-left:20%;">
<table class="table-fill" style="float:left;">
<thead>
<tr>
<th class="text-left">
Select All
<div class="checkbox">
<input style="margin-left:15px;" type="checkbox" id="cbSelectAll" />
</div>
</th>
<th class="text-left" style="padding-left:27px;">
First Name
</th>
<th class="text-left" style="padding-left:32px;">
Last Name
</th>
<th class="text-left" style="padding-left:40px;padding-right: 60px;">
Email-ID
</th>
<th class="text-left" style="padding-left:30px;padding-right: 40px;">
Customer Type
</th>
<th class="text-left" style="padding-left:15px;">
Customer Designation
</th>
</tr>
</thead>
</table>
<div id="GridRows" style="width:65%;">
</div>
</div>
<div id="pager"></div>
<input type="hidden" id="currentPage">
<input type="hidden" id="hfCustomerID"/>
<input type="hidden" id="hfSelectAll" />
</body>
this is html. Rows generated dynamically from jquery ajax call to avoid loss of values stored in hidden field on page load.
In this when clicked on select all checked box all values of table from same page selected.
how to store all values of table from multiple pagination when clicked on Select All checkbox?
what are option for storing all values of table?
2 answers
solution1
1 2017-05-11 09:31:48
Actually your checkAll(..) is hanging without any attachment.
1) Add onchange event handler
2) Modified the code to handle check/uncheck
function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name = "chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = rowCount; var cell3 = row.insertCell(2); cell3.innerHTML = rowCount; var cell4 = row.insertCell(3); cell4.innerHTML = rowCount; var cell5 = row.insertCell(4); cell5.innerHTML = rowCount; var cell6 = row.insertCell(5); cell6.innerHTML = rowCount; } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 1; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } } catch (e) { alert(e); } } function checkAll(ele) { var checkboxes = document.getElementsByTagName('input'); if (ele.checked) { for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = true; } } } else { for (var i = 0; i < checkboxes.length; i++) { console.log(i) if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = false; } } } }
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <TABLE id="dataTable" border="1"> <tr> <th> <INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th> <th>Make</th> <th>Model</th> <th>Description</th> <th>Start Year</th> <th>End Year</th> </tr> </TABLE>
solution2
0 2017-05-11 09:28:15
You can if you are using datatable.
$(document).ready(function () {
var oTable = $('#example').dataTable({
stateSave: true
});
var allPages = oTable.fnGetNodes();
$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', allPages).prop('checked', false);
} else {
$('input[type="checkbox"]', allPages).prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});
There is one more option ie you have to add same class name on all checkboxes and add this code.(If you not use datatable).
var select_all = document.getElementById("select_all");
var checkboxes = document.getElementsByClassName("checkbox");
select_all.addEventListener("change", function(e){
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = select_all.checked;
}
});
for(var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(e){ //".checkbox" change
//uncheck "select all", if one of the listed checkbox item isunchecked
if(this.checked == false){
select_all.checked = false;
}
if(document.querySelectorAll('.checkbox:checked').length ==checkboxes.length){
select_all.checked = true;
}
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
javascript select all checkboxes in a table
Javascript Filter Table then select all checkboxes
How can I select all checkboxes from a form using pure JavaScript (without JS frameworks)?
Javascript: how to get values from all selected checkboxes from a table
How to Check All Checkboxes using JavaScript in a table row emitted by PHP
select checkboxes from a list using javascript/jQuery
Trying to select all checkboxes in a single HTML table in Javascript
how to select / unselect the checkboxes using javascript/jquery
Select All Checkboxes in Table JQuery
select all checkboxes… with javascript and rails
Related Tags