Author: Asif Iqbal
I am a web developer. I work on JavaScript, PHP, ASP.NET, jQuery, ActionScript, AJAX and Facebook application, as well as interested in social networking and daily active user on Twitter, Facebook and Google+
Hello,
I am back with a new and easiest way to check/uncheck all checkboxes in jQuery. Before jQuery people used to write a long code for selecting checkboxes, but here is a short and memorable script.
Javascript code before jQuery:
<script type="text/javascript">
function checkAll()
{
var inputs = document.getElementsByTagName('input');
var checkboxes = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'checkbox') {
inputs[i].checked =true;
}
}
}
</script>
jQuery code:
Before writing a code you must have to add jQuery library into <head> section, see below code to add jQuery library.
</script><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[name='checkAll']").click(function() {
var checked = $(this).attr("checked");
$("#myTable tr td input:checkbox").attr("checked", checked);
});
});
</script>
Yeah.. Lets have a look how you can select/deselect all checkboxes in jQuery
HTML code:
<body>
<form>
<table border="1" cellpadding="2" cellspacing="2" width="500" id="myTable">
<tr>
<th><input type="checkbox" id="checkAll" name="checkAll" /></th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td align="center"><input type="checkbox" name="paramId[]" id="paramId[]" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="paramId[]" id="paramId[]" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="paramId[]" id="paramId[]" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="paramId[]" id="paramId[]" /></td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
Video tutorial:
Alright. This tutorial would be very helpful for you guys,
Thank you for visiting my blog.
Popularity: unranked
Comments on this entry (1 comment)
Did you like this post? You can share your opinion with us! Simply click here.