📅 最后修改于: 2023-12-03 15:38:03.748000 🧑 作者: Mango
jQuery Mobile 是一款适用于移动设备的 HTML5 UI 框架，可以轻松构建响应式网页和移动应用。其中包括了很多不同的控件，本文将介绍如何使用 jQuery Mobile 制作垂直单选按钮控件组。
在开始之前，需要引入以下文件：
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
创建一个字段集 (fieldset)，一个字段集可以包含多个单选按钮。
<fieldset data-role="controlgroup" data-type="vertical">
在字段集中添加多个单选按钮 (input)，每个单选按钮必须具有相同的 name 属性和不同的 id 属性。label 元素可以包含在 input 元素之后。
<legend>选择一项：</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked>
<label for="radio-choice-1">选项1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">选项2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">选项3</label>
结束字段集 (fieldset)。
</fieldset>
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直单选按钮控件组</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<fieldset data-role="controlgroup" data-type="vertical">
<legend>选择一项：</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked>
<label for="radio-choice-1">选项1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">选项2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">选项3</label>
</fieldset>
</div>
</div>
</body>
</html>
在本文中，我们介绍了如何使用 jQuery Mobile 制作垂直单选按钮控件组。通过以上代码，可以轻松构建具有良好交互性和可用性的响应式网页和移动应用。