如何使用 jQuery Mobile 制作迷你水平复选框控件组？

简介

jQuery Mobile 是一款基于 jQuery 的开源移动应用框架，用于构建响应式的移动应用程序。本文将介绍如何使用 jQuery Mobile 制作迷你水平复选框控件组。

HTML 结构

首先，我们需要先定义 HTML 结构，以便使用 jQuery Mobile 样式。下面是一个基本的 HTML 结构：

<div data-role="fieldcontain">
	<fieldset data-role="controlgroup" data-type="horizontal">
		<legend>点击选择：</legend>
		<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
        <label for="checkbox-1">选项1</label>
        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
        <label for="checkbox-2">选项2</label>
        <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
        <label for="checkbox-3">选项3</label>
	</fieldset>
</div>

我们可以使用 data-role="fieldcontain" 和 fieldset 标签来创建一个组，以便更好地组织和标记复选框控件。同时，我们还可以使用 data-role="controlgroup" 和 data-type="horizontal" 属性来创建水平的复选框控件组。

在 fieldset 标签中，我们可以定义一个 legend 标签来标记组的标题。此外，每一个复选框都需要一个 input 标签和一个对应的 label 标签。for 属性值需要与 input 标签的 id 属性值匹配。

JavaScript

为了让复选框控件组生效，我们需要在 HTML 文件中引入 jQuery 库和 jQuery Mobile 库，并使用以下 JavaScript 代码：

$(document).ready(function() {
    $('input.custom').each(function() {
        var $input = $(this);
        var $label = $input.next('label');
        $input.appendTo($label).checkboxradio({
            icon: false
        });
    });
});

这段代码会将 input 标签插入到对应的 label 标签中，并使用 checkboxradio() 方法将它们转换为 jQuery Mobile 样式。icon 属性设置为 false，因为我们不需要在复选框前面添加图标。

完成以上步骤后，就可以看到一个迷你的水平复选框控件组了。

结语

通过这篇文章，我们了解了如何使用 jQuery Mobile 制作迷你的水平复选框控件组。jQuery Mobile 还提供了丰富的控件样式和拓展功能，可以帮助你快速构建漂亮的移动应用程序。