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 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 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 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 find all checkbox inputs using jQuery ?
The task is to find all the checkbox input using jQuery. Checkboxes are the square boxes that are ticked when activated, and it is used to select one or more number of choices. Method and Selectors used: :checkbox: This selector is used to select the input element with type = checkbox. .wrap(): This
2 min read
How to find all elements that are disabled in jQuery ?
In this article, we will learn how to find all elements on the page that are disabled using jQuery. Approach: The :disabled selector can be used to get all elements on the page that are currently disabled. These elements are iterated over using the each() method. The elements can then be individuall
2 min read
How to uncheck all other checkboxes apart from one using jQuery ?
In this article, we will see how to uncheck all checkboxes except first using jQuery. Approach: First, we need to get all check box elements in a page. We can get all the check-boxes using the following jQuery call: $('input[type=checkbox]') Next we can use jQuery each function to iterate over each
2 min read
How to select all even/odd rows in table using jQuery ?
In this article, we will see how to make a table by selecting the alternate rows i.e. selecting the even or odd rows by clicking on the respective buttons. This feature can be useful at the time of selecting the specific data/elements of either of the rows or to highlight the table of data for displ
3 min read