Check uncheck multiple checkboxes using Javascript

Hello friends, welcome to my another post. Today I will show you how to Check uncheck multiple check boxes using Javascript and jQuery. Check box Plays very important role in forms. When we are listing some users to send mail or if we want to enable or disable some items from a item list we need to select or Check/Uncheck all options or few options. This Check/Uncheck option allow us to manage the above requirement very easily.

There are different ways to achieve this result; we can keep two buttons for this. One button will check all the checkboxes and other button will uncheck all the buttons. The same result we can achieve by using a single buttons also. But I build the application using a single checkbox to check/uncheck all options. Lets start the coding



Build the html table

<h1>Check uncheck all checkboxes using Javascript </h1>
			<form name="form1" method="post" action="">
			<div class="span12">
			<a id="checkall" onclick="checkAll('form1',true);" href="javascript:void();">Check All</a><a style="display:none;" id="uncheckall" onclick="checkAll('form1',false);" href="javascript:void();">Uncheck All</a>
				<table class="table table-bordered">
					<thead>
								<tr>
									<th></th>
									<th>Name</th>
									<th>Position</th>
									<th>Office</th>
									<th>Age</th>
									<th>Start date</th>
									<th>Salary</th>
								</tr>
					</thead>

					<tbody>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Tiger Nixon</td>
							<td>System Architect</td>
							<td>Edinburgh</td>
							<td>61</td>
							<td>2011/04/25</td>
							<td>$320,800</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Garrett Winters</td>
							<td>Accountant</td>
							<td>Tokyo</td>
							<td>63</td>
							<td>2011/07/25</td>
							<td>$170,750</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Lael Greer</td>
							<td>Systems Administrator</td>
							<td>London</td>
							<td>21</td>
							<td>2009/02/27</td>
							<td>$103,500</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Jonas Alexander</td>
							<td>Developer</td>
							<td>San Francisco</td>
							<td>30</td>
							<td>2010/07/14</td>
							<td>$86,500</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Shad Decker</td>
							<td>Regional Director</td>
							<td>Edinburgh</td>
							<td>51</td>
							<td>2008/11/13</td>
							<td>$183,000</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Michael Bruce</td>
							<td>Javascript Developer</td>
							<td>Singapore</td>
							<td>29</td>
							<td>2011/06/27</td>
							<td>$183,000</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Donna Snider</td>
							<td>Customer Support</td>
							<td>New York</td>
							<td>27</td>
							<td>2011/01/25</td>
							<td>$112,000</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Zenaida Frank</td>
							<td>Software Engineer</td>
							<td>New York</td>
							<td>63</td>
							<td>2010/01/04</td>
							<td>$125,250</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Zorita Serrano</td>
							<td>Software Engineer</td>
							<td>San Francisco</td>
							<td>56</td>
							<td>2012/06/01</td>
							<td>$115,000</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Jennifer Acosta</td>
							<td>Junior Javascript Developer</td>
							<td>Edinburgh</td>
							<td>43</td>
							<td>2013/02/01</td>
							<td>$75,650</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Cara Stevens</td>
							<td>Sales Assistant</td>
							<td>New York</td>
							<td>46</td>
							<td>2011/12/06</td>
							<td>$145,600</td>
						</tr>
						<tr>
							<td><input type="checkbox" name='check[]'/></td>
							<td>Hermione Butler</td>
							<td>Regional Director</td>
							<td>London</td>
							<td>47</td>
							<td>2011/03/21</td>
							<td>$356,250</td>
						</tr>
					</tbody>
				</table>
			</div>	
			</form>

Javascript function to handle the main logic

	<script type="text/javascript" language="javascript">
	function checkAll(formname, checktoggle)
	{
	if(checktoggle==true)
	{
		document.getElementById('checkall').style.display='none';
		document.getElementById('uncheckall').style.display='block';
	}
	else
	{
		document.getElementById('checkall').style.display='block';
		document.getElementById('uncheckall').style.display='none';
	}
	  var checkboxes = new Array();
	  checkboxes = document[formname].getElementsByTagName('input');
	 
	  for (var i=0; i<checkboxes.length; i++)  {
		if (checkboxes[i].type == 'checkbox')   {
		  checkboxes[i].checked = checktoggle;
		}
	  }
	} 

	</script>

The above code is finish here but this is not the end. Now I show you another way to select group of check boxes

Check uncheck Gmail-like Grouped checkboxes using jQuery

This script will not select all the check boxes using a single but but this will give you a chance to select group of check boxes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Check uncheck multiple checkboxes using Javascript </title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="container">
	   <div class="row">
			<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
			<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
			<script type="text/javascript" src="js/jquery.shiftcheckbox.js"></script>
			<script type="text/javascript">
			$(document).ready (
				function () {
				$('.shiftCheckbox').shiftcheckbox();
				});
			</script>
			<h1>Check uncheck Gmail-like Grouped checkboxes using jQuery </h1>
			<div class="span12">
				<div style="float: left; position: relative; width: 35%">
					<ol>
						<li>Select any checkbox
						<li>Now press SHIFT and select another checkbox above or below the previously selected checkbox
					</ol>
				</div>
				<fieldset style="width: 15%">
				<legend>Select Range</legend>
				&nbsp;<input type="checkbox" name="rating[]" value="1" class="input shiftCheckbox" />1<br />
				&nbsp;<input type="checkbox" name="rating[]" value="2" class="input shiftCheckbox" />2<br />
				&nbsp;<input type="checkbox" name="rating[]" value="3" class="input shiftCheckbox" />3<br />
				&nbsp;<input type="checkbox" name="rating[]" value="4" class="input shiftCheckbox" />4<br />
				&nbsp;<input type="checkbox" name="rating[]" value="5" class="input shiftCheckbox" />5<br />
				&nbsp;<input type="checkbox" name="rating[]" value="6" class="input shiftCheckbox" />6<br />
				&nbsp;<input type="checkbox" name="rating[]" value="7" class="input shiftCheckbox" />7<br />
				&nbsp;<input type="checkbox" name="rating[]" value="8" class="input shiftCheckbox" />8<br />
				&nbsp;<input type="checkbox" name="rating[]" value="9" class="input shiftCheckbox" />9<br />
				&nbsp;<input type="checkbox" name="rating[]" value="10" class="input shiftCheckbox" />10<br />
				&nbsp;<input type="checkbox" name="rating[]" value="11" class="input shiftCheckbox" />11<br />
				&nbsp;<input type="checkbox" name="rating[]" value="12" class="input shiftCheckbox" />12<br />
				&nbsp;<input type="checkbox" name="rating[]" value="13" class="input shiftCheckbox" />13<br />
				</fieldset>
		  
			</div>	
		</div>
	</div>
	 <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

I create the above two application in one page. Below is the demo and download link for check uncheck multiple checkboxes using Javascript
Demo
Download

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •