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.


  • 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.


Therefore, let’s have a look at the code for the same −

<!DOCTYPE html>
   <title>Multiple input Checkbox</title>
      #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;
   <div id='holder'></div>
   <div id='box'></div>
      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';
   = 'pointer';
            cancelIcon.onclick = () => handleClick(key);
            const item = document.createElement('div');
            const element = document.createElement('p');
            element.innerText = key;
   = key.toLowerCase();
   const handleClick = (label) => {
      options[label] = !options[label];
   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'); = key;
         label.innerText = key;
         label.for = key;
         input.type = 'checkbox';
         input.value = key;
         input.checked = options[key];
         input.onchange = () => handleClick(key);


  • 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.

Updated on: 06-Feb-2023


Kickstart Your Career

Get certified by completing the course

Get Started