Home > Article > Web Front-end > How to implement multi-input checkbox in plain JavaScript?
How to implement multi-input checkbox in plain JavaScript?
- WBOYforward
- 2023-09-07 20:53:02895browse
We will learn how to implement a multi-input checkbox. The checkbox input selector will have the following functionality -
You can use checkboxes to select multiple options.
The selected options will be displayed as a separate list.
Each selected option will provide delete icon to uncheck/remove that option.
Another thing to note is that we will not be using any third party libraries to implement these features, everything will be written in HTML JavaScript CSS only.
method
We will have an object whose key will be used as the label for the checkbox input and the value (true/false) will be used as the checked attribute.
We will then render each key of that object.
We re-render the list every time the state of any option changes.
Similarly, after clicking the delete icon, we will update the options and re-render the list.
Example
So let’s look at the same code -
<!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>
illustrate
The code above creates a web page that displays a set of checkboxes.
Each has a different color label (red, green, yellow, etc.).
When the checkbox is selected, the corresponding color label will be displayed in the "holder" div at the top of the page.
The tag also displays an "x" which, when clicked, deselects the checkbox and removes the tag from the "holder" div.
The code uses JavaScript to manipulate the DOM and handle checkbox selection and deselection.
The above is the detailed content of How to implement multi-input checkbox in plain JavaScript?. For more information, please follow other related articles on the PHP Chinese website!