How To Get All Checked Checkbox Value In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of how to get all checked checkbox value in JavaScript, in HTML, the checkbox is used to select one or multiple options from any page.
Now to get all checked checkbox values in JavaScript we have used the .checked property with the for loop and .length property.
.checked property: this property of JavaScript is used to set or reset the checkbox in the HTML page. By setting it true we can select checkboxes.
We can also deselect all the checkboxes by setting the .checked property to false.
Step By Step Guide On How To Get All Checked Checkbox Value In JavaScript :-
<!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.0">
<title> how to get all checked checkbox value in javascript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> how to get all checked checkbox value in javascript </h3>
</center>
<br>
<input type="checkbox" name="carcheck" value="Hyundai"> Hyundai <br>
<input type="checkbox" name="carcheck" value="Toyota"> Toyota <br>
<input type="checkbox" name="carcheck" value="Kia"> Kia <br>
<input type="checkbox" name="carcheck" value="Honda"> Honda <br>
<input type="checkbox" name="carcheck" value="Renault"> Renault <br>
<input type="checkbox" name="carcheck" value="Volkswagen"> Volkswagen <br>
<input type="button" onclick="selectall()" value="select all">
<input type="button" onclick="deselectall()" value="deselect all">
<script type="text/javascript">
function selectall() {
let carcheck = document.getElementsByName("carcheck") ;
let carchecklength = carcheck.length ;
for(var x=0; x<carchecklength; x++) {
carcheck[x].checked = true ;
}
}
function deselectall() {
let carcheck = document.getElementsByName("carcheck") ;
let carchecklength = carcheck.length ;
for(var x=0; x<carchecklength; x++) {
carcheck[x].checked = false ;
}
}
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As mentioned above, the <head> tag contains information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Creating a <style> tag to add CSS to the page. Also adding an external CSS file to Style the form
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating some checkbox input using <input> tag with the type of ‘checkbox’. Add the name of the checkbox at all <input> tag and values of different values.
- Using <br> to all the <input> checkbox to break into lines
- Now creating two button using <input> of type button with the ‘onclick’ of functions selectall() and deselectall() and the values of select all and deselect all
- Creating a <script> tag to write JavaScript within it
- At first create a function for selectall(). Within create a variable for carcheck with document.getElementByName() of ‘carcheck’.
- Using .length property of javascript to check the length of the carcheck variable.
- Now create a for loop and set the .checked property to true as per the length of the carcheck
- Then create a function of deselectall(). Within create a variable for carcheck with document.getElementByName() of ‘carcheck’.
- Again using .length property of javascript to check the length of the carcheck variable.
- Now create a for loop and set the .checked property to false as per the length of the carcheck
- Closing the script tag using </script>.
- Now by clicking on the select all button we can select all the checkboxes and by clicking on deselect all we can deselect all the checkboxes.
- We close the HTML file with </html> tag
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to get all checked checkbox value in javascript.
I hope this article on how to get all checked checkbox value in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
