Handling multiple checkbox with select and unselect
Find the below code you can get simple solution here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>rajesh</td>
<td>kumar</td>
<td>Hyderabad</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>rajesh1</td>
<td>kumar1</td>
<td>Hyderabad1</td>
</tr>
</table>
</BODY>
</HTML>
<body>
</body>
</html>
Include the below script in in your head tag
Find the below code you can get simple solution here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>rajesh</td>
<td>kumar</td>
<td>Hyderabad</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>rajesh1</td>
<td>kumar1</td>
<td>Hyderabad1</td>
</tr>
</table>
</BODY>
</HTML>
<body>
</body>
</html>
Include the below script in in your head tag
<SCRIPT language="javascript">$(function(){ // add multiple select / deselect functionality $("#selectall").click(function () { $('.case').attr('checked', this.checked); }); // if all checkbox are selected, check the selectall checkbox // and viceversa $(".case").click(function(){ if($(".case").length == $(".case:checked").length) { $("#selectall").attr("checked", "checked"); } else { $("#selectall").removeAttr("checked"); } });});</SCRIPT>
No comments:
Post a Comment