如何在vanilla JavaScript中实现多个输入复选框

如何在vanilla JavaScript中实现多个输入复选框

我们将学习如何实现多个输入复选框。The checkbox input selector will have the following functionalities −

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

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

  • 删除图标将被提供给每个选择的选项,以取消/删除该选项。

另外需要注意的是,我们不会使用任何第三方库来实现这些功能,一切都将只用HTML + JavaScript + CSS编写。

方法

  • 我们将有一个对象,它的键将被用作复选框输入的标签,值(真/假)将被用作复选属性。

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

  • 每当任何选项的状态发生变化时,我们将重新渲染该列表。

  • 同样地,当点击删除图标时,我们将更新选项并重新渲染列表。

例子

因此,让我们来看看同样的代码:

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

解释说明

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

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

  • 当一个复选框被选中时,相应的颜色标签会显示在页面顶部的 “持有人 “div中。

  • 标签上还会出现一个 “x”,当点击时,就会取消对复选框的选择,并将标签从 “持有人 “div中移除。

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 教程