How To Get Checkbox Value In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of how to get checkbox value in JavaScript, as we know checkboxes mostly are rectangular in shape and we can tick more than one checkbox at a time. They are different from radio buttons.
If you have any confusion between checkbox and radio then must visit to our previous html articles. Let us start today’s topic.
Step By Step Guide On How To Get Checkbox Value In JavaScript :-
As, first of all there are many ways with the help of which we can get checkbox values. Mainly all method based on one condition that checkbox is checked or not.
If it is checked then we are able to get its value it not then it considered as empty. Let us understand this with help of codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
</head>
<body style=”text-align:center”>
<h1>
How to get checkbox value in JavaScript
</h1>
<input type="checkbox" name="car"
value="audi">Audi car<br>
<input type="checkbox" name="car"
value="rollsRoyce">Rolls Royce car<br>
<input type="checkbox" name="car"
value="bugati">Bugati car<br>
<input type="checkbox" name="car"
value="tata">TATA cars<br>
<input type="checkbox" name="car"
value="lamborigni">Lamborgini car<br>
<button onclick="value()">
Get Value Here
</button>
<script>
Function value() {
var checkboxes =
document.getElementsByName('car');
var result = "";
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
result += checkboxes[i].value
+ " " + " Car, ";
}
}
document.write("<p> You have selected : "
+ result + "</p>");
}
</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 above now <head> tag is used to contain information about 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.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- As you can see under body we create some checkboxes, its total five. And name used here is car. As we know the name must be same for all checkbox for specific condition.
- After that we create a button, on click on that our function runs which is created in script tag.
- Now, let us understand script which is created after button.
- Script is a paired tag and we use it here to write JavaScript. Under script, we create a variable checkboxes which get values from all checkboxes. The values like they are clicked or not.
- In next step we again create a variable named result to show result. After that we use for loop to check how many checkboxes are checked.
- And if checkboxes are checked then value directly send to result variable which print result at last. We hope you understand codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to get values of checkbox using JavaScript.
I hope this tutorial on how to get checkbox value in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
