Foundation - 複選框和單選框

複選框可用於從列表中選擇多個選項；單選框只能用於選擇一個選項。
將一組複選框和單選框封閉在 fieldset 元素中，並使用 legend 元素為它們提供一個公用文字。
fieldset 元素中的每個控制元件都必須有單獨的標籤，可以使用 label 標籤建立。

範例

以下示例演示在 Foundation 中使用 複選框和單選框。

<html>
   <head>
      <title>Checkboxes and Radio Buttons</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <form>
         <div class = "row">
            <fieldset class = "medium-12 columns">
               <legend>Select your vehicle</legend>

               <input type = "radio" name = "vehicle" value = "XUV" id = "vehicleXUV" required>
               <label for = "vehicleXUV">XUV</label>

               <input type = "radio" name = "vehicle" value = "XYLO" id = "vehicleXYLO">
               <label for = "vehicleXYLO">XYLO</label>

               <input type = "radio" name = "vehicle" value = "SCORPIO" id = "vehicleSCORPIO">
               <label for = "vehicleSCORPIO">SCORPIO</label>
            </fieldset>
         </div>

         <div class = "row">
            <fieldset class = "medium-12 columns">
               <legend>Choose your favourite company</legend>

               <input id = "audi" type = "checkbox">
               <label for = "audi">Audi</label>

               <input id = "mahindra" type = "checkbox">
               <label for = "mahindra">Mahindra</label>

               <input id = "benz" type = "checkbox">
               <label for = "benz">Benz</label>
            </fieldset>
         </div>

      </form>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，看看上面給出的程式碼如何工作 -

將上面給出的 html 程式碼儲存為 forms_check_radio.html 檔案。
在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

foundation_forms.htm

列印頁面

Foundation - 複選框和單選框

描述

範例

輸出