📅 最后修改于: 2023-12-03 14:51:57.323000 🧑 作者: Mango
jQuery Mobile 是一个基于 jQuery 的移动应用程序开发框架，使用它可以轻松地创建具有标准化外观和行为的移动应用程序。其中，复选框是常见的表单元素之一，以下将介绍如何使用 jQuery Mobile 制作基本复选框标记。
在 HTML 文档中，需要先引入 jQuery 和 jQuery Mobile 的相关文件，可以通过以下代码实现：
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入 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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
在 HTML 文档中，创建一个 input 元素，并设置其 type 属性为 checkbox，通过 id 属性来标识该元素：
<input type="checkbox" id="checkbox-1">
使用 <label> 元素来定义复选框的标签，该元素的 for 属性应该与复选框的 id 属性相同：
<label for="checkbox-1">复选框</label>
通过添加 data-theme 属性，可以为复选框设置主题（不设置主题则为默认主题）：
<label for="checkbox-1" data-theme="a">复选框</label>
其中，a 表示主题名称，可以根据自己的需求进行调整。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框示例</title>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入 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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox-1">
<label for="checkbox-1" data-theme="a">复选框</label>
</body>
</html>
通过以上步骤，可以轻松地创建具有标准化外观和行为的复选框。除此之外，jQuery Mobile 还提供了丰富的组件和工具，使得我们可以更加便捷地开发移动应用程序。