jQuery Mobile 表单选择学习笔记

1. 概述

jQuery Mobile 提供了一个易于使用的表单选择工具，使用户能够轻松地选择选项或输入值。

表单选择工具分为两种类型：单个选择（Radio Buttons）和多选选择（Checkboxes）。单个选择工具可以让用户从可用选项中选择一个选项。多选工具允许用户从可用选项中选择一个或多个选项。

2. 单选按钮（Radio Buttons）

2.1 基本用法

单选按钮由一组单选按钮组成，用户只能选择其中的一个。要创建单选按钮组，请将每个单选按钮放在同一个 <fieldset> 元素中，并将它们的 type 属性设置为 "radio"。

示例代码：

htmlCopy Code
<fieldset data-role="controlgroup">
    <legend>请选择你最喜欢的颜色:</legend>
    <input type="radio" name="color" id="red" value="red">
    <label for="red">红色</label>
    <input type="radio" name="color" id="green" value="green">
    <label for="green">绿色</label>
    <input type="radio" name="color" id="blue" value="blue">
    <label for="blue">蓝色</label>
</fieldset>

2.2 高级用法

可使用 data-mini="true" 控制组件大小。

示例代码：

htmlCopy Code
<fieldset data-role="controlgroup" data-mini="true">
    <legend>请选择你最喜欢的水果:</legend>
    <input type="radio" name="fruit" id="apple" value="apple">
    <label for="apple">苹果</label>
    <input type="radio" name="fruit" id="banana" value="banana">
    <label for="banana">香蕉</label>
    <input type="radio" name="fruit" id="orange" value="orange">
    <label for="orange">橙子</label>
</fieldset>

3. 多选框（Checkboxes）

3.1 基本用法

多选框允许用户从多个选项中选择一个或多个选项。要创建多选框，请将它们的 type 属性设置为 "checkbox"。

示例代码：

htmlCopy Code
<fieldset data-role="controlgroup">
    <legend>请选择你喜欢的颜色:</legend>
    <input type="checkbox" name="color" id="red" value="red">
    <label for="red">红色</label>
    <input type="checkbox" name="color" id="green" value="green">
    <label for="green">绿色</label>
    <input type="checkbox" name="color" id="blue" value="blue">
    <label for="blue">蓝色</label>
</fieldset>

3.2 高级用法

可使用 data-mini="true" 控制组件大小。

示例代码：

htmlCopy Code
<fieldset data-role="controlgroup" data-mini="true">
    <legend>请选择你喜欢的水果:</legend>
    <input type="checkbox" name="fruit" id="apple" value="apple">
    <label for="apple">苹果</label>
    <input type="checkbox" name="fruit" id="banana" value="banana">
    <label for="banana">香蕉</label>
    <input type="checkbox" name="fruit" id="orange" value="orange">
    <label for="orange">橙子</label>
</fieldset>

4. 总结

本文简要介绍了 jQuery Mobile 表单选择工具的基本用法和高级用法，包括单选按钮和多选框两种类型。通过本文的学习，你将能够在自己的网站或 Web 应用程序中添加可交互的表单选择控件，为用户提供更好的体验。