JavaScript 如何實現表單多項選擇功能？

JavaScript 如何實作表單多項選擇功能？

表單是網頁中常見的元素，用來收集使用者的輸入資訊。在表單中，我們經常需要提供多項選擇的選項，例如複選框或多選清單。 JavaScript是一種用來為網頁添加互動功能的程式語言，可以透過它來實現表單多項選擇功能。

在開始之前，我們先了解常見的表單多項選擇的元素有哪些。

1. 複選框（Checkbox）: 複選框允許使用者選擇一個或多個選項。每個複選框都有一個與之關聯的值，當使用者勾選或取消勾選方塊時，該值的狀態也會改變。
2. 單選按鈕（Radio Button）：單選按鈕可讓使用者從一組選項中選擇一個選項。使用者只能選取其中的一個選項，不能同時選取多個。
3. 下拉清單（Select）：下拉清單允許使用者從預先定義的選項中選擇一個選項。使用者透過點擊下拉清單來展開選項，並選擇選項。

以下是一些特定的程式碼範例，展示如何使用JavaScript實作表單多項選擇功能：

##複選框的使用範例：

1. <input type="checkbox" id="option1" value="Option 1"> Option 1
   <input type="checkbox" id="option2" value="Option 2"> Option 2
   
   <script>
     const option1 = document.getElementById('option1');
     const option2 = document.getElementById('option2');
   
     option1.addEventListener('change', () => {
       if (option1.checked) {
         console.log('Option 1 is checked');
       } else {
         console.log('Option 1 is not checked');
       }
     });
   
     option2.addEventListener('change', () => {
       if (option2.checked) {
         console.log('Option 2 is checked');
       } else {
         console.log('Option 2 is not checked');
       }
     });
   </script>

單選按鈕的使用範例：

2. <input type="radio" id="option1" name="options" value="Option 1"> Option 1
   <input type="radio" id="option2" name="options" value="Option 2"> Option 2
   
   <script>
     const option1 = document.getElementById('option1');
     const option2 = document.getElementById('option2');
   
     option1.addEventListener('change', () => {
       if (option1.checked) {
         console.log('Option 1 is selected');
       }
     });
   
     option2.addEventListener('change', () => {
       if (option2.checked) {
         console.log('Option 2 is selected');
       }
     });
   </script>

#下拉清單的使用範例：

3. <select id="options">
     <option value="Option 1">Option 1</option>
     <option value="Option 2">Option 2</option>
   </select>
   
   <script>
     const options = document.getElementById('options');
   
     options.addEventListener('change', () => {
       const selectedOption = options.value;
       console.log('Selected option:', selectedOption);
     });
   </script>

透過上述程式碼範例，我們可以看到如何使用JavaScript來取得使用者選擇的多項選擇元素的狀態，進而對其進行相應的處理。

總結起來，JavaScript可以方便地實現表單多項選擇功能，透過監聽元素的變更事件，我們可以取得使用者選擇的選項，並進行對應的操作。以上只是一些簡單的範例，實際應用可能需要更複雜的邏輯和互動功能。但希望這些範例能幫助你理解如何使用JavaScript實作表單多項選擇功能。

以上是JavaScript 如何實現表單多項選擇功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！