Javascript Check All Checkboxes On Button Click Example

Jul 07, 2021 . Admin

Hello Friends,

Now let's see example of how to check if check all checkboxes on button click example. We will use how to check if check all checkboxes on button click in javascript. Here you will learn how to use javascript check all checkboxes on button click. This is a short guide on check if check all checkboxes on button click. Let's get started with how to check if check all checkboxes on button click in javascript.

Here i will give you many example how you can check if check all checkboxes on button click javascript.

Example : 1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Check All Checkboxes On Button Click</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body class="bg-dark">
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h5>JavaScript - Check All Checkboxes On Button Click</h5>
						</div>
						<div class="card-body">
							<big>Select your favourite subject: </big><br>
							<input type="checkbox" name="sub" value="Laravel"> Laravel<br>
							<input type="checkbox" name="sub" value="Java"> Java<br>
							<input type="checkbox" name="sub" value="PHP"> PHP<br>
							<input type="checkbox" name="sub" value="Jquery"> Jquery<br>
							<p>
								<input type="button" class="btn btn-primary"  onclick='selectAll()' value="Select All"/>
								<input type="button" class="btn btn-info" onclick='UnSelectAll()' value="Unselect All"/>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function selectAll(){
				var subjects=document.getElementsByName('sub');
				for(var i=0; i<subjects.length; i++){
					if(subjects[i].type=='checkbox')
						subjects[i].checked=true;
				}
			}
			
			function UnSelectAll(){
				var subjects=document.getElementsByName('sub');
				for(var i=0; i<subjects.length; i++){
					if(subjects[i].type=='checkbox')
						subjects[i].checked=false;
				}
			}			
		</script>		
	</body>
</html>
Output :
All checkBox checked on button click.
Example : 2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Check All Checkboxes On Button Click</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body class="bg-dark">
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h5>JavaScript - Check All Checkboxes On Button Click</h5>
						</div>
						<div class="card-body">
							<form name="myform" action="" method="post" >
								<input type="checkbox" name="company_list[]" value="Dell"> Dell<br>
								<input type="checkbox" name="company_list[]" value="HP"> HP<br>
								<input type="checkbox" name="company_list[]" value="Lenovo"> Lenovo<br>
								<input type="checkbox" name="company_list[]" value="Acer"> Acer<br>
								<input type="checkbox" name="company_list[]" value="Asus"> Asus<br><br>
								<input type="checkbox" name="company_check" value="yes" onClick=Check()>
								<b>Check Control</b><br>
								<input type="submit" class="btn btn-primary" value="Submit">
							</form> 
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			function Check(){
				cmp=document.getElementsByName("company_check")[0]
				cmp2=document.getElementsByName('company_list[]')
				if(cmp.checked==true){
				  for (i=0;i<cmp2.length;i++)
				    cmp2[i].checked=true
				}else{
				  for (i=0;i<cmp2.length;i++)
				    cmp2[i].checked=false
				}
			}
		</script>	
	</body>
</html>
Output :
All checkBox checked on button click.

It will help you...

#Javascript