如何在普通 JavaScript 中實作多輸入複選框？-js教程-PHP中文網

如何在普通 JavaScript 中實作多輸入複選框？

WBOY

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

轉載

951 人瀏覽過

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

登入後複製