Home >>Javascript Programs >Check/Uncheck all Checkboxes on Button Click using JavaScript

Check/Uncheck all Checkboxes on Button Click using JavaScript

In this article, we will learn how to code select/Unselect (check/uncheck) all Checkboxes on Button Click by using JavaScript.

This JavaScript function is used to check (select), unselect (uncheck) all checkboxes by just clicking one button. By using this code we will check or uncheck all checkboxes in one click.

Method

You need to create a JavaScript function.
Use window.onload function : you can use this function as soon as the page refresh or loading.
Use window.addEventListener: It helps you to adding event listeners on any HTML document that support events.

So, this article is helpful how to check/Uncheck all checkboxes on Button Click.

Let's take an example:

<html>
	<head>
		<title>JavaScript - Select/Unselect (Check/Uncheck) all CheckBoxes on Button Click.</title>
		<script type="text/javascript">
			function selectAll(){
				var items=document.getElementsByName('acs');
				for(var i=0; i<items.length; i++){
					if(items[i].type=='checkbox')
						items[i].checked=true;
				}
			}
			function UnSelectAll(){
				var items=document.getElementsByName('acs');
				for(var i=0; i<items.length; i++){
					if(items[i].type=='checkbox')
						items[i].checked=false;
				}
			}			
		</script>
	</head>
<body>
	<input type="checkbox" name="acs" value="Red">Red<br>
	<input type="checkbox" name="acs" value="Blue">Blue<br>
	<input type="checkbox" name="acs" value="Yellow">Yellow<br>
	<input type="checkbox" name="acs" value="Orange">Orange<br>
	<input type="checkbox" name="acs" value="Pink">Pink<br>
	<input type="checkbox" name="acs" value="Voilet">Voilet<br>
	<p>
	<input type="button" onclick='selectAll()' value="Select All"/>
	<input type="button" onclick='UnSelectAll()' value="Unselect All"/>
	</p>
</body>
</html>

« Previous Next »

Javascript Programs JavaScript code to check number is Perfect or not JavaScript code to check number is Armstrong or not JavaScript code to check whether a Number is Prime or Not JavaScript code to find largest of three numbers Check number is palindrome or not in JavaScript How to build a calculator using JavaScript Disable right click on webpage with JavaScript Print a fibonacci series in JavaScript How to copy text to clipboard with JavaScript How to Get browser details through JavaScript Create a forward and back buttons in JavaScript How to Get the size of a file with JavaScript How to find absolute value of a number in JavaScript Create functions with default arguments in JavaScript Find the larger of two numbers in JavaScript Count occurrence of a particular character in a string in JavaScript Get current date, month and year in JavaScript How to parse number from string in JavaScript Reverse an array in JavaScript Dynamically add CSS class with JavaScript How to get the extension of a file using JavaScript Generate random number within a range in JavaScript Display Input Text into Lowercase using JavaScript Check/Uncheck all Checkboxes on Button Click using JavaScript Convert a number into different base in JavaScript Print value of all checked (selected) Checkboxes on Button click using JavaScript

No Sidebar ads