如何使用 jQuery Mobile 创建垂直复选框控件组？

jQuery Mobile 提供了一种创建垂直复选框控件组的简单方式。它可以让用户在一个清晰的列表中选择多个选项。

步骤

1. 引入 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>

2. 创建垂直复选框控件组

<fieldset data-role="controlgroup" data-type="vertical">
  <legend>垂直复选框控件组</legend>
  <input type="checkbox" name="checkbox-1" id="checkbox-1">
  <label for="checkbox-1">选项1</label>
  <input type="checkbox" name="checkbox-2" id="checkbox-2">
  <label for="checkbox-2">选项2</label>
  <input type="checkbox" name="checkbox-3" id="checkbox-3">
  <label for="checkbox-3">选项3</label>
</fieldset>

3. 自定义样式

你还可以自定义复选框的样式，如下所示：

.ui-checkbox {
  width: 3em;
  height: 3em;
}
.ui-icon {
  border-radius: 50%;
  width: 2.6em;
  height: 2.6em;
  top: 0.2em;
  left: 0.2em;
  box-shadow: none;
}
.ui-checkbox label {
  margin-left: 4em;
}

效果

你可以在以下链接中查看该控件组的演示效果：

演示效果