I have an HTML as follow :
<table class="responsive display table table-bordered">
<tbody>
<tr>
<th>Sr No</th>
<th>Student Code</th>
<th>Student Name</th>
<th>Date Of Birth</th>
<th>Action</th>
<th>Select <a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
</tr>
<form action="" method="post"></form>
<tr>
<td>1</td>
<td>1001</td>
<td>Rohit Singhal </td>
<td>17-4-1988</td>
<td>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=2" rel="tooltip" title="update" class="update">
<i class="icon-pencil"></i>
</a>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
<i class="icon-trash"></i>
</a>
</td>
<td>
<input name="deleteselect[]" value="2" type="checkbox">
</td>
</tr>
<tr>
<td>2</td>
<td>1003</td>
<td>Lisa Kurdow </td>
<td>24-7-1965</td>
<td> <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=6" rel="tooltip" title="update" class="update"><i class="icon-pencil"></i></a> <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=6" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete"><i class="icon-trash"></i></a></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
</tbody></table>
I have a select all
checkbox with id checkAll
What I want is that when I click on this checkbox then it should select/deselect all the remaining check box in table
I have used the code :
<script type="text/javascript">
jQuery(document).ready(function (){
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
But when I click on selectAll checkbox then it does not select the checkboxes. Please help me what is missing in it ?
If you get jQuery(...).prop not a function
error, it means you are using an old version of jQuery ( < 1.6
). Very old, it is recommended to update the jQuery. Use this code then:
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery("#checkAll").change(function () {
if (this.checked)
jQuery("input:checkbox").attr('checked', "checked");
else
jQuery("input:checkbox").removeAttr('checked');
});
});
</script>
You can use bellow code. I tested it's working fine.
$(document).ready(function(){ $("#checkAll").change(function () { $("input:checkbox").attr('checked', this.checked); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <table class="responsive display table table-bordered"> <tbody> <tr> <th>Sr No</th> <th>Student Code</th> <th>Student Name</th> <th>Date Of Birth</th> <th>Action</th> <th>Select <a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th> </tr> <form action="" method="post"></form> <tr> <td>1</td> <td>1001</td> <td>Rohit Singhal </td> <td>17-4-1988</td> <td> <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=2" rel="tooltip" title="update" class="update"> <i class="icon-pencil"></i> </a> <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete"> <i class="icon-trash"></i> </a> </td> <td> <input name="deleteselect[]" value="2" type="checkbox"> </td> </tr> <tr> <td>2</td> <td>1003</td> <td>Lisa Kurdow </td> <td>24-7-1965</td> <td> <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=6" rel="tooltip" title="update" class="update"><i class="icon-pencil"></i></a> <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=6" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete"><i class="icon-trash"></i></a></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr> </tbody></table>
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.