Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to implement multiple input checkbox in vanilla JavaScript?
We will learn how to implement multiple input checkbox. The checkbox input selector will have the following functionalities −
Multiple options can be selected using the checkbox.
Chosen options will be displayed as a separate list.
Delete icon will be provided against each chosen option to uncheck / delete that option.
Another thing to note is that we will not be using any third-party library to achieve these functionalities and everything will be written in HTML + JavaScript + CSS only.
Approach
We will have an object whose key will be used as the label for checkbox input and value (true/false) will be used as checked property.
We will then render each key of that object.
And every time the status of any option changes we will re-render the list.
And similarly, on click of the delete icon, we will update options and re-render the list.
Example
Therefore, let’s have a look at the code for the same −
<!DOCTYPE html>
<html>
<head>
<title>Multiple input Checkbox</title>
<style>
#holder {
background: #ddd;
min-height: 35px;
border-radius: 5px;
padding: 5px;
overflow-y: scroll;
display: flex;
align-items: center;
flex-direction: row;
}
#box {
display: flex;
flex-direction: column;
}
.divison {
margin: 15px 0;
}
.item {
margin: 0;
margin-right: 5px;
padding: 0;
}
.itemHolder {
display: flex;
margin-right: 20px;
flex-direction: row;
align-items: center;
padding: 5px 10px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id='holder'></div>
<div id='box'></div>
</body>
<script>
const options = {
'Red': false,
'Green': false,
'Yellow': false,
'Orange': false,
'Blue': false,
'Black': false,
'Cyan': false,
'Magenta': false,
'Pink': false
};
const renderOptions = () => {
const holder = document.getElementById('holder');
holder.innerHTML = '';
for (const key of Object.keys(options)) {
if (options[key]) {
const cancelIcon = document.createElement('span');
cancelIcon.innerText = 'x';
cancelIcon.style.cursor = 'pointer';
cancelIcon.onclick = () => handleClick(key);
const item = document.createElement('div');
const element = document.createElement('p');
element.innerText = key;
element.style.color = key.toLowerCase();
element.classList.add('item');
item.appendChild(element);
item.appendChild(cancelIcon);
item.classList.add('itemHolder');
holder.appendChild(item);
}
}
};
const handleClick = (label) => {
options[label] = !options[label];
renderCheckbox();
renderOptions();
};
const renderCheckbox = () => {
const box = document.getElementById('box');
box.innerHTML = '';
for (const key of Object.keys(options)) {
const divison = document.createElement('div');
const input = document.createElement('input');
const label = document.createElement('label');
divison.classList.add('divison');
input.id = key;
label.innerText = key;
label.for = key;
input.type = 'checkbox';
input.value = key;
input.checked = options[key];
input.onchange = () => handleClick(key);
divison.appendChild(input);
divison.appendChild(label);
box.appendChild(divison);
}
};
renderCheckbox();
</script>
</html>
Explanation
The above code creates a webpage that displays a set of checkboxes.
Each with a different color label (Red, Green, Yellow, etc.).
When a checkbox is selected, the corresponding color label is displayed in the "holder" div at the top of the page.
The label also appears with an "x" that, when clicked, deselects the checkbox and removes the label from the "holder" div.
The code uses JavaScript to manipulate the DOM and handle the checkbox selections and deselections.
527 Views
