In this blog post I'll show you, how to get the values of multiple checkboxes in HTML, CSS, and JavaScript. With this guide, you'll be able to get the values of any number of selected checkboxes with ease.
It's useful when user selected the multiple options on your website that you offered and want to know or confirming that which options is selected by user.
It's easy to get the value of checked checkboxes. Select all checkbox, target each checkbox by foreach function of JavaScript, you can also use for loop. Read further for more details.
Get the value of multiple checked checkbox.
File structure:
- Create one folder.
- Open it in you code editor.
- Create two files in that folder with named index.html and index.css.
I've also intergrated JavaScript that I've added with in HTML file.
Let's start making functionaity to get the multiple selected checkboxes value.
First of all we'll create a design. We'll add checkboxes with its values and one button. We'll use label tag and nest the checkbox and p tag (for displaying value of checkbox), enabling the select and unselect checkbox with label (checkbox and p tag).
Button is for getting the value of selected checkboxes. We'll add click event to this button and run a function to get the selected checkboxes.
The value we'll get, is from the value attribute of checkbox. The p tag is just for visibility.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<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>Get the value of multiple selected checkboxes | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h2 style="text-align: center; font-size: 25px;">Maketechstuff.com</h2>
<label>
<input type="checkbox" class="checkboxes" value="html">
<p>HTML</p>
</label>
<label>
<input type="checkbox" class="checkboxes" value="CSS">
<p>CSS</p>
</label>
<label>
<input type="checkbox" class="checkboxes" value="javascript">
<p>JAVASCRIPT</p>
</label>
<label>
<input type="checkbox" class="checkboxes" value="php">
<p>PHP</p>
</label>
<button class="button" type="button">Submit</button>
<div class="output"></div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
label {
display: flex;
align-items: center;
margin: 10px 0px;
padding: 15px;
cursor: pointer;
transition: 0.2s;
}
label:hover {
background-color: #1e1e1e;
}
label p {
margin: 0px 0px 0px 10px;
font-size: 20px;
cursor: pointer;
display: block;
}
.button {
width: 100%;
font-size: 25px;
padding: 10px 15px;
background-color: blue;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.output {
margin: 15px 0px;
}
span {
font-size: 25px;
padding: 10px 15px;
margin: 5px;
background-color: blue;
color: #fff;
border: none;
border-radius: 5px;
}
As you can see in above css code that I have added styling to span tag element (which is not in html). We going to add that span tag through JavaScript and inside it we going to add values of selected checkbox.
Output :
As you can see image above. The basic design is completed. Now let's get the values of selected checkboxes.
Add JavaScript to get the value of selected checkboxes.
We have multiple checkboxes. And we have to get the value of every checkbox that is selected by user on the click of button.
For getting multiple checkboxes value. We'll use JavaScript forEach Loop.
JavaScript
let checkboxes = document.querySelectorAll(".checkboxes");
let output = document.querySelector(".output");
let button = document.querySelector(".button");
button.onclick = function () {
output.innerHTML = "";
checkboxes.forEach(checkboxes => {
if (checkboxes.checked) {
output.innerHTML += `<span>` + checkboxes.value + `</span>`;
}
});
}
Now let's check it. So I have selected html,css and php. And see what happens after click on submit button. We get checked checkbox value above in p tag.
Output:
You can also do it with forloop in javascript.
JavaScript
let checkboxes = document.querySelectorAll(".checkboxes");
let output = document.querySelector(".output");
let button = document.querySelector(".button");
button.onclick = function () {
output.innerHTML = "";
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
output.innerHTML += `<span>` + checkboxes[i].value + `</span>`;
}
}
}
You may like:
- How to design a checkbox using HTML & CSS.
- How to create right tick animation using HTML, CSS & JavaScript.
- How to get the value of radio button using HTML, CSS & JavaScript.
- How to design custom animated radio buttons that looks like checkbox using HTML, CSS & JavaScript.
So that's how you can get the value of multiple selected checkbox value using JavaScript. If you have any question or suggestion you can write them in the comment section.
Share your thoughts.