I am using data-table for listing, i added checkbox column for select-all, but jquery not working only for those checkboxes
Question
I am using data-table for listing.. everything working properly.. but now i have added checkbox-columns for select-all functionality..
But problem is that.. jquery working everywhere on that page.. but jquery only not working for those checkboxes
My Code Snippet: .....
<tr>
<th>
<input type="checkbox" name="confirmselectall" id="confirmselectall" />
</th>
.......
</tr>
.....
.....
<tr class="odd gradeX">
<td>
<input name="confirm[]" id="confirm" type="checkbox" value="<?php echo $row -> order_id; ?>" class="confirm">
</td>
.........
</tr>
My jquery script:
<script>
$(document).ready(function () {
$("#confirmselectall").click(function () {
$(".confirm").prop('checked', $(this).prop('checked'));
});
$(".confirm").change(function(){
if (!$(this).prop("checked")){
$("#confirmselectall").prop("checked",false);
}
});
});
</script>
simple alert(); also not working.. why jquery not working only for checkboxes.. on same page.. jquery working properly for those functionalities.. please suggest me changes??
4 answers
solution1
0 2017-08-22 07:39:36
because input checkbox not ready when document ready . you must use on.('click') instead of click
solution2
0 2017-08-22 07:47:03
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/> <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var info = $('#example').DataTable( { order: [[ 1, 'asc' ]] } ); $('#checkall').click(function () { $(':checkbox', info.rows().nodes()).prop('checked', this.checked); }); } ); </script> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th><input type="checkbox" id="checkall" title="Select all" onClick="toggle(this)"/></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td><input name="confirm[]" type="checkbox" value="2323" class="confirm"></td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>$170,750</td> </tr> <tr> <td><input name="confirm[]" type="checkbox" value="2324" class="confirm"></td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>$86,000</td> </tr> <tr> <td><input name="confirm[]" type="checkbox" value="2224" class="confirm"></td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>$433,060</td> </tr> </tbody> </table> </body> </html>
solution3
0 2017-08-22 07:55:07
Straight from documentation
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
Look here for more info https://learn.jquery.com/using-jquery-core/document-ready/
In your case make sure your DOM is ready.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th> <input type="checkbox" name="confirmselectall" id="confirmselectall" /> </th> ....... </tr> ..... ..... <tr class="odd gradeX"> <td> <input name="confirm[]" id="confirm" type="checkbox" value="<?php echo $row -> order_id; ?>" class="confirm"> <input name="confirm[]" id="confirm" type="checkbox" value="<?php echo $row -> order_id; ?>" class="confirm"> <input name="confirm[]" id="confirm" type="checkbox" value="<?php echo $row -> order_id; ?>" class="confirm"> <input name="confirm[]" id="confirm" type="checkbox" value="<?php echo $row -> order_id; ?>" class="confirm"> <input name="confirm[]" id="confirm" type="checkbox" value="<?php echo $row -> order_id; ?>" class="confirm"> </td> ......... </tr> </table> <script> $(document).ready(function () { $("#confirmselectall").on('click',function () { console.log('checked'); $(".confirm").prop('checked', $(this).prop('checked')); }); $(".confirm").change(function(){ if (!$(this).prop("checked")){ $("#confirmselectall").prop("checked",false); } }); }); </script>
For DataTable have a look at the following
solution4
0 2019-06-06 06:53:41
I know its too late to answer my own question, though I am answering for helping purpose, without caring points..
For data tables, I was facing issue with checkboxes column.
Only for those checkboxes, jQuery issue was there
even alert() was not working, but many searches.. I got solution
$("input[name=field_name]").on('ifChecked', function (event) {
......
......
});
there is special event for checkboxes & data-tables combination, "ifChecked"
now jquery working propelry..
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.