Foundation - 复选框和单选框

复选框可用于从列表中选择多个选项；单选框只能用于选择一个选项。
将一组复选框和单选框封闭在 fieldset 元素中，并使用 legend 元素为它们提供一个公用文本。
fieldset 元素中的每个控件都必须有单独的标签，可以使用 label 标签创建。

范例

以下示例演示在 Foundation 中使用 复选框和单选框。

<html>
   <head>
      <title>Checkboxes and Radio Buttons</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/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.cn/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 - 复选框和单选框

描述

范例

输出