如何使用 jQuery Mobile 制作水平组单选按钮？

在移动应用程序中，选择组件是必不可少的。jQuery Mobile 提供了几种选择组件，包括单选按钮组。本文将介绍如何使用 jQuery Mobile 制作水平组单选按钮。

准备工作

在开始之前，您需要确保已经引入了 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.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

制作水平组单选按钮

要制作水平组单选按钮，您需要使用 <fieldset> 元素和 <input type="radio"> 元素。请按照以下步骤操作：

1. 创建一个包含单选按钮的 <fieldset> 元素。
2. 在 <fieldset> 元素中创建多个单选按钮，每个按钮都有相同的 name 属性，并且每个按钮的 id 和 label 属性也应相同。
3. 使用 <label> 元素将每个单选按钮与其 id 属性相关联。

<fieldset data-role="controlgroup" data-type="horizontal">
  <input type="radio" name="radio-choice-h" id="radio-choice-h-1" value="choice-1" checked>
  <label for="radio-choice-h-1">Choice 1</label>
  <input type="radio" name="radio-choice-h" id="radio-choice-h-2" value="choice-2">
  <label for="radio-choice-h-2">Choice 2</label>
  <input type="radio" name="radio-choice-h" id="radio-choice-h-3" value="choice-3">
  <label for="radio-choice-h-3">Choice 3</label>
</fieldset>

定制样式

使用 jQuery Mobile，您可以轻松地自定义选择组件的样式。您可以为每种状态（默认，悬停，选中）设置不同的背景颜色和边框颜色。以下示例将在选中时将单选按钮的背景颜色更改为绿色：

input[type="radio"]:checked + label {
  background-color: green;
}

总结

本文提供了使用 jQuery Mobile 创建水平组单选按钮的示例，并演示了如何自定义其样式。通过使用简单的 HTML 和 CSS，您可以轻松地制作出漂亮和实用的选择组件，为您的移动应用程序提供更好的用户体验。

<fieldset data-role="controlgroup" data-type="horizontal">
  <input type="radio" name="radio-choice-h" id="radio-choice-h-1" value="choice-1" checked>
  <label for="radio-choice-h-1">Choice 1</label>
  <input type="radio" name="radio-choice-h" id="radio-choice-h-2" value="choice-2">
  <label for="radio-choice-h-2">Choice 2</label>
  <input type="radio" name="radio-choice-h" id="radio-choice-h-3" value="choice-3">
  <label for="radio-choice-h-3">Choice 3</label>
</fieldset>

<style>
  input[type="radio"]:checked + label {
    background-color: green;
  }
</style>