如何使用 JavaScript 在選擇選項中使用複選框？-js教程-PHP中文網

建立自訂選擇選單

文法

步驟

範例 1

首頁

web前端

js教程

如何使用 JavaScript 在選擇選項中使用複選框？

PHPz

Aug 29, 2023 pm 10:41 PM

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

有時，我們需要使用選擇選項中的複選框。我們可以透過引入具有選擇選項的複選框來允許使用者選擇多個選項。然而，如果我們使用選單中引入複選框來改善使用者體驗。

在這裡，我們將使用 JQuery 和 JavaScript 來管理

建立自訂選擇選單

HTML 的

文法

使用者可以按照以下語法使用 JavaScript 管理自訂下拉式選單的複選框。

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')
}

登入後複製

在上面的語法中，我們根據 showCheckBoxes 變數的值顯示自訂下拉清單的選項。另外，我們可以迭代selectedOptions數組來一一取得所有選取的複選框。

步驟

第 1 步 - 建立一個包含選單文字的 div。
第 2 步 - 現在，使用自訂 HTML，並使用複選框輸入類型進行選項。
第 3 步 - 在 div 元素上新增 onClick 事件。當使用者點擊 div 時，它應該會呼叫 showOptions() 選單。
步驟 4 - 在 JavaScript 中，宣告 showCheckBoxes 變量，並使用 true 布林值對其進行初始化。我們將根據 showCheckBoxes 變數顯示自訂下拉清單的選項。
第 5 步 - 每當使用者按一下下拉 div 元素時，根據 showCheckBoxes 變數的值變更選項 div 的顯示。
第 6 步驟 - 現在，定義一個 getOptions() 函數。在 getOptions() 函數中，透過使用 for 迴圈迭代 selectedOptions 陣列來存取所有選取的複選框並列印所有選取的複選框的值。

範例 1

在下面的範例中，我們按照上述演算法中的說明建立了自訂選擇選單。使用者可以透過選取多個複選框來選擇多個選項。

此外，當使用者點擊「取得選定的複選框」按鈕時，它會呼叫getOptions() 函數並列印所有選定複選框的值，這樣我們就可以獲得選擇選單的所有選定選項。

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

登入後複製

在本教學中，使用者學習如何使用 html、CSS 和 JavaScript 建立自訂選擇選單。此外，使用者還可以使用 Bootstrap 等一些 CSS 庫來建立帶有複選框的選擇選單。

以上是如何使用 JavaScript 在選擇選項中使用複選框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7835

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。