How to Select all Checkboxes in all Pages in jQuery DataTable ?
Last Updated :
30 Jul, 2024
Selecting all the table entries together at the same time in the jQuery data table can be achieved using the below methods. Before directly going to the implementation, first include the below CDN Links to your HTML document to implement the data table.
Using the fnGetNodes() method of dataTable
In this approach, we will use the fnGetNodes() method to select all the checkboxes of all pages of the data table and then check them by clicking on the Select All button.
Syntax:
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.fnGetNodes();Example: The below code example implements the fnGetNodes() method to check all page checkboxes in jQuery dataTable.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to select all checkboxes in all
pages in Jquery DataTable?
</title>
<!-- Data table CSS CDN Link -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
integrity=
"sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.conatiner {
text-align: center;
}
.tableData {
margin: auto;
}
</style>
</head>
<body>
<div class="conatiner">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Select all the checkboxes of the table by
clicking the Select All button
</h3>
<table id="myTable" border="1px solid #ccc;"
class="tableData">
<thead>
<tr>
<th>
<button id="selectAll"
class="GFGSelect">
Select All
</button>
</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"
id="checbox1">
</td>
<td>Garvit Malhotra</td>
<td>25</td>
<td>Web Developer</td>
<td>Pune</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox2">
</td>
<td>Kunal Srivats</td>
<td>22</td>
<td>Software Engineer</td>
<td>Kolkata</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox3">
</td>
<td>Jordan Sandhu</td>
<td>32</td>
<td>Video Editor</td>
<td>Durban</td>
<td>South Africa</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox4">
</td>
<td>Sreenath Malinga</td>
<td>29</td>
<td>Head Coach</td>
<td>Colombo</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox5">
</td>
<td>Benjamin Smith</td>
<td>26</td>
<td>Blog/Content Writer</td>
<td>Melbourne</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- DataTable Script CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
integrity=
"sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.fnGetNodes();
console.log(allPagesCheckboxes);
$('#selectAll').click(function () {
const thisText = $(this).text();
if(thisText === "Unselect All"){
$('input[type="checkbox"]', allPagesCheckboxes)
.attr('checked', false);
$(this).text('Select All');
}
else{
$('input[type="checkbox"]', allPagesCheckboxes)
.attr('checked', true);
$(this).text('Unselect All');
}
});
});
</script>
</body>
</html>
Output:
Using the api().rows().nodes() methods
The api().rows().nodes() methods can also be used to select all rows of all the pages and then it can be used to check checkboxes of all the rows.
Syntax:
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.api().rows().nodes();Example: The below code example uses the api().rows().nodes() method to select all the rows and check their checkboxes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to select all checkboxes in all
pages in Jquery DataTable?
</title>
<!-- Data table CSS CDN Link -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
integrity=
"sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.conatiner {
text-align: center;
}
.tableData {
margin: auto;
}
</style>
</head>
<body>
<div class="conatiner">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Select all the checkboxes of the table by
clicking the Select All button
</h3>
<table id="myTable" border="1px solid #ccc;"
class="tableData">
<thead>
<tr>
<th>
<button id="selectAll"
class="GFGSelect">
Select All
</button>
</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"
id="checbox1">
</td>
<td>Garvit Malhotra</td>
<td>25</td>
<td>Web Developer</td>
<td>Pune</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox2">
</td>
<td>Kunal Srivats</td>
<td>22</td>
<td>Software Engineer</td>
<td>Kolkata</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox3">
</td>
<td>Jordan Sandhu</td>
<td>32</td>
<td>Video Editor</td>
<td>Durban</td>
<td>South Africa</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox4">
</td>
<td>Sreenath Malinga</td>
<td>29</td>
<td>Head Coach</td>
<td>Colombo</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox5">
</td>
<td>Benjamin Smith</td>
<td>26</td>
<td>Blog/Content Writer</td>
<td>Melbourne</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- DataTable Script CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
integrity=
"sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.api().rows().nodes();
$('#selectAll').click(function () {
if($(this).text() === "Unselect All"){
$(allPagesCheckboxes).find('input[type="checkbox"]')
.attr('checked', false);
$(this).text('Select All');
}
else{
$(allPagesCheckboxes).find('input[type="checkbox"]')
.attr('checked', true);
$(this).text('Unselect All');
}
});
});
</script>
</body>
</html>
Output:
Using the api().cells().nodes() methods
The api().cells().nodes() methods are together used to select all the cells of the data table that can be used to check the checkboxes of all the pages and entries.
Syntax:
const myTable = $('#myTable').dataTable({
stateSave: true});
const allPagesCheckboxes = myTable.api().cells().nodes();Example: The below code example practically implements the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to select all checkboxes in all
pages in Jquery DataTable?
</title>
<!-- Data table CSS CDN Link -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
integrity=
"sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.conatiner {
text-align: center;
}
.tableData {
margin: auto;
}
</style>
</head>
<body>
<div class="conatiner">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Select all the checkboxes of the table by
clicking the Select All button
</h3>
<table id="myTable" border="1px solid #ccc;"
class="tableData">
<thead>
<tr>
<th>
<button id="selectAll"
class="GFGSelect">
Select All
</button>
</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"
id="checbox1">
</td>
<td>Garvit Malhotra</td>
<td>25</td>
<td>Web Developer</td>
<td>Pune</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox2">
</td>
<td>Kunal Srivats</td>
<td>22</td>
<td>Software Engineer</td>
<td>Kolkata</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox3">
</td>
<td>Jordan Sandhu</td>
<td>32</td>
<td>Video Editor</td>
<td>Durban</td>
<td>South Africa</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox4">
</td>
<td>Sreenath Malinga</td>
<td>29</td>
<td>Head Coach</td>
<td>Colombo</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox5">
</td>
<td>Benjamin Smith</td>
<td>26</td>
<td>Blog/Content Writer</td>
<td>Melbourne</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- DataTable Script CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
integrity=
"sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.api().cells().nodes();
$('#selectAll').click(function () {
if($(this).text() === "Unselect All"){
$(allPagesCheckboxes).find('input[type="checkbox"]')
.attr('checked', false);
$(this).text('Select All');
}
else{
$(allPagesCheckboxes).find('input[type="checkbox"]')
.attr('checked', true);
$(this).text('Unselect All');
}
});
});
</script>
</body>
</html>
Output:
Similar Reads
How to Create a Select All Checkbox in JavaScript ?
In web apps with lots of checkboxes, a "Select All" checkbox is useful. It lets users check or uncheck all checkboxes at once, making things quicker. This feature can be implemented in various ways, such as utilizing JavaScript and JQuery to incorporate a "Select All" checkbox. This enhances the app
2 min read
How to get all selected checkboxes in an array using jQuery ?
In this article, we are going to discuss various methods to get all the selected checkboxes in an array using jQuery. Several ways of doing this in jQuery are explained in detail with their practical implementation using code examples. Table of Content Using the array.push() method with each() metho
4 min read
How to select all ancestors of an element in jQuery ?
In this article, we will select all the ancestor elements of an element in jQuery. To select all ancestor elements of an element, the parents() method is used. This method is used to find all the parent elements related to the selected element. This method traverses all the levels up the selected el
1 min read
How to enable or disable nested checkboxes in jQuery ?
In this article, we will see how to enable or disable nested checkboxes in jQuery. To do that, we select all child checkboxes and add disabled attributes to them with the help of the attr() method in jQuery so that all checkboxes will be disabled. Syntax: // Select all child input of type checkbox /
2 min read
How to use API inside callbacks using jQuery DataTables plugin ?
Datatables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. DataTables is a simple-to-use jQuery plug-in with many options available for developer's custom changes. The other common features are pagination, searching, sorting, and multiple colu
3 min read
How to make a Disabled Checkbox using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Disabled Checkbox using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€
1 min read
How to select all visible or hidden elements in a HTML page using jQuery ?
In order to select all visible or hidden elements in a page using jQuery, we can use the following jQuery selectors: :visible Selector The visible Selector is used to select all the elements that are currently visible in the document. Syntax: $(":visible") :hidden Selector The hidden selector select
2 min read
How to select all on focus in input using JQuery?
The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields. Syntax: $("selected element").select(); //Select all Input field on focus $("input").select(); //Select Input field on focus
1 min read
How to hide the checkbox based on value in jQuery?
The checkbox is used to set the content according to the user which he wants to see at the interface. Users also can set multiple choices according to their wishes. Syntax: $('input[name=foo]').attr('checked', false);ApproachIntegrate jQuery in HTML file via CDN Links. Includes the necessary title.
2 min read
How to select specific ancestors of an element in jQuery ?
In this article, we will select specific ancestor elements of an element in jQuery. To select the specific ancestor elements of an element, we use the parents() method. This method is used to find the parent elements related to the selected element. This parent () method traverse all the levels up t
1 min read