Bagaimana untuk melaksanakan kotak semak berbilang input dalam JavaScript biasa?-tutorial js-php.cn

Bagaimana untuk melaksanakan kotak semak berbilang input dalam JavaScript biasa?

WBOY

Lepaskan： 2023-09-07 20:53:02

ke hadapan

968 orang telah melayarinya

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

Kami akan belajar cara melaksanakan kotak pilihan berbilang input. Pemilih input kotak semak akan mempunyai fungsi berikut -

Pelbagai pilihan boleh dipilih menggunakan kotak pilihan.
Pilihan yang dipilih akan dipaparkan sebagai senarai berasingan.
Setiap pilihan yang dipilih akan memberikan ikon padam untuk menyahtanda/memadam pilihan itu.

Satu lagi perkara yang perlu diambil perhatian ialah kami tidak akan menggunakan mana-mana perpustakaan pihak ketiga untuk melaksanakan ciri ini, semuanya akan ditulis dalam HTML + JavaScript + CSS sahaja.

Kaedah

Kami akan mempunyai objek yang kuncinya akan digunakan sebagai label untuk input kotak semak dan nilai (benar/salah) akan digunakan sebagai atribut yang ditandakan.
Kami kemudian akan memberikan setiap kunci objek.
Kami akan memaparkan semula senarai apabila status sebarang pilihan berubah.
Begitu juga, selepas mengklik ikon padam, kami akan mengemas kini pilihan dan memaparkan semula senarai.

Contoh

Jadi mari kita lihat kod yang sama -

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

Salin selepas log masuk

Arahan

Kod di atas mencipta halaman web yang memaparkan satu set kotak pilihan.
Setiap satu mempunyai label warna yang berbeza (merah, hijau, kuning, dll.).
Apabila kotak pilihan dipilih, label warna yang sepadan akan dipaparkan dalam div "pemegang" di bahagian atas halaman.
Label juga memaparkan "x" yang, apabila diklik, menyahpilih kotak semak dan mengalih keluar label daripada div "pemegang".
Kod menggunakan JavaScript untuk memanipulasi DOM dan mengendalikan pemilihan dan nyahpilih kotak pilihan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak semak berbilang input dalam JavaScript biasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!