Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to implement multiple input checkbox in vanilla JavaScript?
We will learn how to implement multiple input checkbox functionality in vanilla JavaScript. The checkbox input selector will have the following features:
Multiple options can be selected using checkboxes
Chosen options will be displayed as a separate list with visual indicators
Delete icon will be provided against each chosen option to uncheck/remove that option
We will implement this functionality using only HTML, CSS, and JavaScript without any third-party libraries.
Approach
Create an object where keys represent checkbox labels and values (true/false) represent checked status
Dynamically render checkboxes for each option in the object
Re-render the selected items list whenever checkbox status changes
Handle delete functionality by updating the options object and re-rendering
Example
Here's the complete implementation of the multiple checkbox selector:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Input Checkbox</title>
<style>
#holder {
background: #f0f0f0;
min-height: 50px;
border-radius: 8px;
padding: 10px;
margin-bottom: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
border: 2px dashed #ccc;
}
#holder:empty::before {
content: "Selected items will appear here...";
color: #999;
font-style: italic;
}
#box {
display: flex;
flex-direction: column;
gap: 10px;
}
.division {
display: flex;
align-items: center;
gap: 8px;
}
.itemHolder {
display: flex;
align-items: center;
padding: 6px 12px;
margin: 4px;
background: white;
border: 1px solid #ddd;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.item {
margin: 0;
font-weight: 500;
}
.delete-btn {
margin-left: 8px;
cursor: pointer;
color: #ff4757;
font-weight: bold;
font-size: 14px;
padding: 2px 6px;
border-radius: 50%;
background: #ffe0e1;
}
.delete-btn:hover {
background: #ff4757;
color: white;
}
input[type="checkbox"] {
width: 16px;
height: 16px;
}
label {
cursor: pointer;
font-size: 14px;
}
</style>
</head>
<body>
<h2>Multiple Checkbox Selector</h2>
<div id='holder'></div>
<div id='box'></div>
<script>
const options = {
'Red': false,
'Green': false,
'Yellow': false,
'Orange': false,
'Blue': false,
'Black': false,
'Cyan': false,
'Magenta': false,
'Pink': false,
'Purple': false
};
const renderSelectedOptions = () => {
const holder = document.getElementById('holder');
holder.innerHTML = '';
for (const key of Object.keys(options)) {
if (options[key]) {
const itemContainer = document.createElement('div');
itemContainer.classList.add('itemHolder');
const colorLabel = document.createElement('span');
colorLabel.innerText = key;
colorLabel.classList.add('item');
colorLabel.style.color = key.toLowerCase();
const deleteBtn = document.createElement('span');
deleteBtn.innerText = '×';
deleteBtn.classList.add('delete-btn');
deleteBtn.onclick = () => handleOptionToggle(key);
deleteBtn.title = `Remove ${key}`;
itemContainer.appendChild(colorLabel);
itemContainer.appendChild(deleteBtn);
holder.appendChild(itemContainer);
}
}
};
const handleOptionToggle = (label) => {
options[label] = !options[label];
renderCheckboxes();
renderSelectedOptions();
};
const renderCheckboxes = () => {
const box = document.getElementById('box');
box.innerHTML = '';
for (const key of Object.keys(options)) {
const division = document.createElement('div');
division.classList.add('division');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = key;
checkbox.value = key;
checkbox.checked = options[key];
checkbox.onchange = () => handleOptionToggle(key);
const label = document.createElement('label');
label.htmlFor = key;
label.innerText = key;
label.style.color = key.toLowerCase();
division.appendChild(checkbox);
division.appendChild(label);
box.appendChild(division);
}
};
// Initialize the checkbox list
renderCheckboxes();
</script>
</body>
</html>
How It Works
Data Structure: The
optionsobject stores each color name as a key with a boolean value indicating selection statusCheckbox Rendering: The
renderCheckboxes()function creates checkbox inputs dynamically from the options objectSelected Items Display: The
renderSelectedOptions()function shows selected items in the holder div with delete buttonsEvent Handling: The
handleOptionToggle()function manages checkbox state changes and triggers re-rendering
Key Features
Dynamic Rendering: Both checkbox list and selected items are generated dynamically
Two-way Interaction: Items can be selected/deselected from either the checkbox list or the selected items area
Visual Feedback: Selected items display with color-coded labels and hover effects on delete buttons
Responsive Design: Selected items wrap to multiple lines when needed
Conclusion
This implementation provides a complete multiple checkbox selector with dynamic rendering and interactive deletion. The approach uses vanilla JavaScript DOM manipulation to create a reusable component that can be easily customized for different datasets.
945 Views
