复选框和单选按钮(Checkboxes and Radio Buttons)
描述 (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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
保存上面给出的html代码forms_check_radio.html文件。
在浏览器中打开此HTML文件，输出显示如下。
