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:02950browse

如何在普通 JavaScript 中实现多输入复选框？

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!

JavaScript css html 对象 dom 选择器

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript program to check if a given number is a power of 2Next article：JavaScript program to check if a given number is a power of 2

See more

How to implement multi-input checkbox in plain JavaScript?

method

Example

illustrate

Related articles