Multiple Checkbox Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of multiple checkbox validation in JavaScript, in HTML, we can create multiple checkboxes with values using the ‘input’ tag.
In JavaScript, we can validate multiple checkboxes. In this tutorial, we will see an example using the .addEventListener tag.
Step By Step Guide On Multiple Checkbox Validation In JavaScript :-
At first, we will see an example of multiple checkbox validation 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> multiple checkbox validation in JavaScript </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
.container {
display : block ;
background-color : bisque ;
color : darkblue ;
justify-content : center ;
align-items : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> multiple checkbox validation in JavaScript </h3>
<p> Choose any colour: </p>
<div class = " container " >
<div class = " box " >
<input type = " checkbox " value = " Blue " class = " checkbox ">
<label for = " Blue "> Blue </label>
</div>
<div class = " box ">
<input type = " checkbox " value = "Yellow " class = " checkbox ">
<label for = " yellow "> Yellow </label>
</div>
<div class = " box ">
<input type = " checkbox " value = " pink " class = " checkbox ">
<label for = " pink "> pink </label>
</div>
<div class = " box " >
<input type = " checkbox " value = " red " class = " checkbox ">
<label for = "red " > red </label>
</div>
<div class = " box " >
<input type = " checkbox " value = " green " class = " checkbox ">
<label for = " green " > green </label>
</div>
</div>
<div class = " print " >
<p id = " valueList "></p>
</div>
<script>
var valueList = document.getElementById('valueList') ;
var text = '<br> you have selected : </br>' ;
var listArray = [];
var checkboxes = document.querySelectorAll('.checkbox') ;
for(var checkbox of checkboxes) {
checkbox.addEventListener('click', function () {
if (this.checked == true) {
listArray.push(this.value) ;
valueList.innerHTML = text + listArray.join('/') ;
}
else {
console.log('you unchecked the checkbox')
}
})
}
</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 the <head> tag is used to contain 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.
- 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 many checkboxes with different values and with the class ‘checkbox’
- to add JavaScript Create a <script> tag.
- Declaring a named ‘valueList’ we used document.getElementById , we access ‘p’ tag by Id name. Also creating a variable named ‘text’ and an empty array ‘listArray’
- Using .querySelectorAll() tag to select all the elements with the class ‘checkbox’.
- Use .addEventListener tag to the event to be done.
- Create an if-else statement with the condition of if the checkbox is checked then display the checkbox value else display a statement
Conclusion :-
At last here in conclusion, here we can say that with this article’s help, we can do multiple checkbox validation in JavaScript.
I hope this article on multiple checkbox validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
