复选框和单选按钮（Checkboxes and Radio Buttons）

优质

小牛编辑

126浏览

2023-12-01

描述 (Description)

复选框可用于从列表中选择多个选项; 单选按钮可用于仅选择一个选项。
在fieldset元素中包含一组复选框和单选按钮，并使用legend元素为它们提供公共文本。
fieldset元素中的每个控件都必须具有单独的标签，可以使用label标签创建。

例子 (Example)

以下示例演示了在Foundation中使用checkboxes and radio buttons 。

<html>
   <head>
      <title>Checkboxes and Radio Buttons</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
   </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 src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>