Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan kotak pilihan dalam pilihan pilihan menggunakan JavaScript?

Bagaimana untuk menggunakan kotak pilihan dalam pilihan pilihan menggunakan JavaScript?

PHPzke hadapan: 2023-08-29 22:41:091260semak imbas

如何使用 JavaScript 在选择选项中使用复选框？

Kadangkala, kita perlu menggunakan kotak pilihan dalam pilihan terpilih. Kami boleh membenarkan pengguna memilih berbilang pilihan dengan memperkenalkan kotak pilihan dengan pilihan terpilih. Walau bagaimanapun, jika kami menggunakan berbilang atribut teg untuk meningkatkan pengalaman pengguna.

Di sini kami akan menggunakan JQuery dan JavaScript untuk mengurus nilai kotak pilihan yang dipilih dalam menu

Buat menu pilihan tersuai

Elemen

HTML

Tatabahasa

Pengguna boleh menggunakan JavaScript untuk mengurus kotak pilihan menu lungsur tersuai mengikut sintaks berikut.

function showOptions() {
   if (showCheckBoxes) {
      // show options div
      showCheckBoxes = false;
   } else {
      // hide options div
      showCheckBoxes = true;
   }
}

function getOptions() {
   // selectedOptions is an array containing all checked checkboxes      
   var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
}

Dalam sintaks di atas, kami menunjukkan pilihan lungsur tersuai berdasarkan nilai pembolehubah showCheckBoxes. Selain itu, kita boleh melelar melalui tatasusunan SelectOptions untuk mendapatkan semua kotak pilihan yang dipilih satu demi satu.

Langkah

Langkah 1 - Buat div yang mengandungi teks menu.
Langkah 2 - Sekarang, gunakan HTML tersuai dan gunakan jenis input kotak semak untuk pilihan.
Langkah 3 - Tambahkan acara onClick pada elemen div. Apabila pengguna mengklik pada div ia harus memanggil menu showOptions().
Langkah 4 - Dalam JavaScript, isytiharkan pembolehubah showCheckBoxes dan mulakannya dengan nilai boolean sebenar. Kami akan memaparkan pilihan dropdown tersuai berdasarkan pembolehubah showCheckBoxes.
Langkah 5 - Setiap kali pengguna mengklik pada elemen div lungsur turun, tukar paparan div pilihan berdasarkan nilai pembolehubah showCheckBoxes.
Langkah 6 - Sekarang, tentukan fungsi getOptions(). Dalam fungsi getOptions(), akses semua kotak pilihan yang dipilih dan cetak nilai semua kotak pilihan yang dipilih dengan mengulangi tatasusunan SelectOptions menggunakan gelung for.

Contoh 1

Dalam contoh di bawah, kami telah mencipta menu pemilihan tersuai seperti yang dijelaskan dalam algoritma di atas. Pengguna boleh memilih berbilang pilihan dengan menandakan berbilang kotak pilihan.

Selain itu, apabila pengguna mengklik butang "Dapatkan Kotak Semak Terpilih", ia memanggil fungsi getOptions() dan mencetak nilai semua kotak pilihan yang dipilih, supaya kami boleh mendapatkan semua pilihan pilihan menu pilihan.

<html>
<head>
   <style>
      .dropdown {
         width: 12rem;
         height: 1.5rem;
         font-size: 1.3rem;
         padding: 0.6 0.5rem;
         background-color: aqua;
         cursor: pointer;
         border-radius: 10px;
         border: 2px solid yellow;
      }
      #options {
         margin: 0.5rem 0;
         width: 12rem;
         background-color: lightgrey;
         display: none;
         flex-direction: column;
         border-radius: 12px;
      }
      label {
         padding: 0.2rem;
      }
      label:hover {
         background-color: aqua;
      }
      button {
         font-size: 1rem;
         border-radius: 10px;
         padding: 0.5rem;
         background-color: yellow;
         border: 2px solid green;
         margin: 1rem 0;
      }
   </style>
</head>
<body>
   <h2>Creating the custom dropdown menu to use <i>Checkboxes</i> as an option.
   </h2>
   <div class = "dropdown" onclick = "showOptions()">
      show all options
   </div>
   <div id = "options">
      <label for = "one">
         <input type = "checkbox" id = "one" value = "First Option" />
            First Option
      </label>
      <label for = "two">
         <input type = "checkbox" id = "two" value = "Second Option" />
            Second Option
      </label>
      <label for = "three">
         <input type = "checkbox" id = "three" value = "Third Option" />
            Third Option
      </label>
      <label for = "four">
         <input type = "checkbox" id = "four" value = "Fourth Option" />
            Fourth Option
      </label>
      <label for = "five">
         <input type = "checkbox" id = "five" value = "Fifth Option" />
            Fifth Option
      </label>
   </div>
   <div id = "output"> </div>
   <button onclick = "getOptions()"> Get all Selected Checkboxes </button>
   <script>
      let output = document.getElementById('output');
      var showCheckBoxes = true;

      function showOptions() {
         var options =
            document.getElementById("options");

         if (showCheckBoxes) {
            options.style.display = "flex";
            showCheckBoxes = !showCheckBoxes;
         } else {
            options.style.display = "none";
            showCheckBoxes = !showCheckBoxes;
         }
      }
      function getOptions() {
         var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
         output.innerHTML = "The selected options are given below. <br/>";
         for (var i = 0; i < selectedOptions.length; i++) {
            output.innerHTML += selectedOptions[i].value + " , ";
            console.log(selectedOptions[i])
         }
      }
   </script>
</body>
</html>

Dalam tutorial ini, pengguna mempelajari cara membuat menu pilihan tersuai menggunakan html, CSS dan JavaScript. Selain itu, pengguna boleh membuat menu pilihan dengan kotak semak menggunakan beberapa perpustakaan CSS seperti Bootstrap.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan kotak pilihan dalam pilihan pilihan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery css bootstrap html for 循环事件算法

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimanakah kaedah Promise.any() berbeza daripada kaedah Promise.race() dalam JavaScript?Artikel seterusnya：Bagaimanakah kaedah Promise.any() berbeza daripada kaedah Promise.race() dalam JavaScript?

Artikel berkaitan

Lihat lagi