How to Select All Checkboxes in JavaScript
This article will demonstrate selecting all checkboxes using JavaScript.
Create a Function to Select All Checkboxes in JavaScript
To choose all checkboxes on a page, we must first develop a function to select all checkboxes at once. Not only will we learn how to select all checkboxes in this section, but we’ll also create a function that will deselect all checked checkboxes.
So, let’s look at how we can use JavaScript to check and uncheck all of the checkboxes.
We’ll work through an example in which we’ll design two buttons, one for choosing all checkboxes and the other for deselecting all checked boxes.
Example:
<html>
<head>
<title>Selecting or deselecting all CheckBoxes</title>
<script type="text/javascript">
function selects(){
var selec=document.getElementsByName('ck');
for(var i=0; i<selec.length; i++){
if(selec[i].type=='checkbox')
selec[i].checked=true;
}
}
function deSelect(){
var selec=document.getElementsByName('ck');
for(var i=0; i<selec.length; i++){
if(selec[i].type=='checkbox')
selec[i].checked=false;
}
}
</script>
</head>
<body>
<h3>Select or Deselect all or some checkboxes as per your favourite fruit:</h3>
<input type="checkbox" name="ck" value="Apple">Apple<br>
<input type="checkbox" name="ck" value="Banana">Banana<br>
<input type="checkbox" name="ck" value="orange">orange<br>
<input type="checkbox" name="ck" value="Pineapple">Pineapple<br>
<br>
<input type="button" onclick='selects()' value="Select All"/>
<input type="button" onclick='deSelect()' value="Deselect All"/>
</body>
</html>
Here, you can also run the code.
HTML and JavaScript are used to create the whole code above. We generated four input kinds as checkboxes and two more input types as buttons in the HTML body section.
We’ve generated two buttons for the input types as buttons: one for selecting checkboxes, which will activate the selects() method, and the other for deselecting checkboxes (if any/all), which will invoke the deSelect() function.
Output:
After clicking on the Select All buttons,
When users click the ‘Select All’ button, they are taken to the script area, where the selects() function is found, and its statements are executed.
After clicking on the Deselect All buttons,
When the user has selected checkboxes and clicks the “Deselect All” button, the deSelect() function is called. If the user has chosen only one or two checkboxes, clicking the “Deselect All” button will also deselect those.
No action will be presented or executed if the user has not selected any checkboxes before clicking the “Deselect All” button.
The user can generate a variety of checkbox examples and test out the feature. Then the user can pick or deselect all checkboxes in this manner.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn