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

我们将学习如何实现多输入复选框。复选框输入选择器将具有以下功能 –

  • 可以使用复选框选择多个选项。

  • 所选选项将显示为单独的列表。

  • 每个选定的选项都会提供删除图标，以取消选中/删除该选项。

另一件事需要注意的是，我们不会使用任何第三方库来实现这些功能，所有内容都将仅用 HTML + JavaScript + CSS 编写。

方法

  • 我们将有一个对象，其键将用作复选框输入的标签，值（true/false）将用作选中的属性。

  • 然后我们将渲染该对象的每个键。

  • 每当任何选项的状态发生变化时，我们都会重新呈现列表。

  • 同样，单击删除图标后，我们将更新选项并重新呈现列表。

示例

因此，让我们看一下相同的代码 –

<!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>

说明

  • 上面的代码创建了一个显示一组复选框的网页。

  • 每个都有不同的颜色标签（红色、绿色、黄色等）。

  • 选中复选框后，页面顶部的“holder”div 中会显示相应的颜色标签。

  • 标签还会显示一个“x”，单击该“x”时，会取消选择复选框并从“holder”div 中删除标签。

  • 代码使用 JavaScript 来操作 DOM 并处理复选框选择和取消选择。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。