如何在普通 JavaScript 中实现多输入复选框？-js教程-PHP中文网

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

WBOY

发布： 2023-09-07 20:53:02

转载

939 人浏览过

如何在普通 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>

登录后复制