如何使用 jQuery Mobile 制作垂直选择控制组？

简介

jQuery Mobile 是一个针对移动端的 UI 框架，它非常适合用来构建移动应用的用户界面。垂直选择控制组是一种非常常见的 UI 元素，通常用来控制某些设置项的选择。

本文将介绍如何使用 jQuery Mobile 来制作一个垂直选择控制组，包括 HTML 结构和 JavaScript 代码。

HTML 结构

HTML 结构非常简单，只需要一个包含若干个 <input> 元素的 <fieldset> 即可。其中，每个 <input> 元素都应该设置 type 属性为 radio，并且设置 name 属性，以便实现单选效果。每个 <input> 元素的 value 属性可以设置为相应的选项值。以下是一个示例代码：

<fieldset data-role="controlgroup" data-type="vertical">
  <legend>Choose an option:</legend>
  <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1">
  <label for="radio-choice-1">Option 1</label>
  <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
  <label for="radio-choice-2">Option 2</label>
  <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
  <label for="radio-choice-3">Option 3</label>
</fieldset>

在上面的代码中，我们使用了 jQuery Mobile 自带的 data-role="controlgroup" 属性来声明这个 fieldset 是一个控制组，data-type="vertical" 属性用来指定垂直排列。

对于每个 <input> 元素，我们还需要为其配对一个 <label>，并且将 for 属性设置为相应的 <input> 元素的 id，这样点击 <label> 也能选中相应的选项。

JavaScript 代码

通常情况下，我们需要将垂直选择控制组的选中值存储在一个变量中，以便在后续逻辑中使用。使用 jQuery Mobile 可以很方便地获取当前选中的值，代码如下：

var selectedValue = $('input[name="radio-choice"]:checked').val();

上面的代码中，我们使用了 jQuery 的选择器来选中当前选中的 <input> 元素，并获取它的 value 值。请注意，因为我们为每个 <input> 元素设置了 name 属性且相同，所以我们需要使用 input[name="radio-choice"] 来选中所有的 <input>，再加上 jQuery 的 :checked 伪类来选中当前选中的 <input>。

结语

通过合适的 HTML 结构和 JavaScript 代码，我们可以很方便地使用 jQuery Mobile 制作一个垂直选择控制组。希望这篇文章能对你有所启发！