Multiple Checkbox Select/Deselect using jQuery
In this tutorial of PHP Point - A Tutorial for Beginners we will show you the implementation of multiple select and deselect checkbox functionality with the use of jquery.
Here if we check top checkbox then all the checkbox below it get automatically selected and vice versa.
Here is the sample code to implement "Checkbox Select/Deselect Functionality with Jquery".
 |
| Multiple Checkbox Select/Deselect using jQuery |
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<TITLE>Multiple Checkbox Select/Deselect - Example</TITLE>
<SCRIPT language="javascript">
$( document ).ready(function() {
$("#checkall").click(function () {
$('.option').attr('checked', this.checked);
});
$(".option").click(function(){
if($(".option").length == $(".option:checked").length) {
$("#checkall").attr("checked", "checked");
} else {
$("#checkall").removeAttr("checked");
}
});
});
</SCRIPT>
</HEAD>
<BODY>
<div class="main-wrapper">
<H2 class="page_header">Multiple Checkbox Select/Deselect</H2>
<table width="100%" class="table">
<tr>
<th><input type="checkbox" id="checkall"/></th>
<th>Topics</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="option" name="login" value="1"/></td>
<td><a href="http://phptutorialforbeginners.com/2012/10/php-simple-login-form-php-tutorial-for.html">Php Login Form</a></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="option" name="ajax" value="2"/></td>
<td><a href="http://phptutorialforbeginners.com/2013/01/jquery-ajax-tutorial-and-example-of.html">Jquery Ajax Example</a></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="option" name="download" value="3"/></td>
<td><a href="http://phptutorialforbeginners.com/2013/04/file-download-script-in-php-php.html">File Download Script</a></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="option" name="upload" value="4"/></td>
<td><a href="http://phptutorialforbeginners.com/2014/02/jquery-ajax-file-upload-example-in-php.html">Ajax File Upload</a></td>
</tr>
</table>
</div>
</BODY>
</HTML>
Hope this php tutorial is useful for you. Keep following Php Point for more Codes.
