使用 jQuery Mobile 制作图标位置复选框

jQuery Mobile 是一个为移动端设计的 HTML5 UI 框架，它提供了丰富的图标和控件组件，可以方便快捷地制作出移动端的界面。本文介绍如何使用 jQuery Mobile 制作图标位置复选框。

1. 引入 jQuery Mobile 库

要使用 jQuery Mobile，首先需要在 HTML 页面中引入 jQuery 和 jQuery Mobile 库。可以通过以下方式引入：

<!-- 引入 jQuery 库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.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>

2. 制作图标位置复选框

使用 jQuery Mobile 制作图标位置复选框非常简单，可以通过 fieldset 和 input 标签来实现。首先，需要创建一个 fieldset，然后在其中添加多个 input 标签，并分别设置它们的 type 属性为 checkbox、name 属性为同一个值，以便后台处理数据。接着，在每个 input 标签之前加上一个 label 标签，并设置 for 属性为相应的 input 的 id 值。最后，在每个 label 标签中添加一个图标即可。

代码如下：

<fieldset data-role="controlgroup">
  <legend>图标位置:</legend>
  <input type="checkbox" id="left" name="iconPos" checked>
  <label for="left" class="ui-btn ui-corner-all ui-icon-left">左侧</label>

  <input type="checkbox" id="right" name="iconPos">
  <label for="right" class="ui-btn ui-corner-all ui-icon-right">右侧</label>

  <input type="checkbox" id="top" name="iconPos">
  <label for="top" class="ui-btn ui-corner-all ui-icon-top">顶部</label>

  <input type="checkbox" id="bottom" name="iconPos">
  <label for="bottom" class="ui-btn ui-corner-all ui-icon-bottom">底部</label>
</fieldset>

其中，data-role="controlgroup" 用于将多个复选框组合在一个组内，方便样式处理。ui-btn、ui-corner-all 和 ui-icon-* 用于设置按钮样式和图标。

3. 获取选中项的值

对于复选框组，需要将它们的值提交给后台进行处理。可以通过以下代码获取选中的复选框的值：

var iconPos = "";
$("input[name='iconPos']:checked").each(function () { // 遍历选中的复选框
  iconPos += $(this).val() + ","; // 将值拼接成一个字符串
});
iconPos = iconPos.slice(0, -1); // 去掉最后一个逗号

其中，$("input[name='iconPos']:checked") 表示选中了 name 属性值为 iconPos 的复选框。val() 方法可以获取复选框的值。

4. 总结

本文介绍了如何使用 jQuery Mobile 制作图标位置复选框，并通过代码展示了具体实现。同时，还介绍了如何获取选中的复选框的值。通过本文的学习，读者可以掌握使用 jQuery Mobile 制作图标位置复选框的方法。