如何使用jQuery Mobile制作垂直的Radio按钮控制组

以下是制作垂直的Radio按钮控制组的完整攻略，基于jQuery Mobile框架。

准备工作

在开始前，请确保已经引入了jQuery及jQuery Mobile库，并且了解基本的HTML、CSS和JavaScript知识。

制作垂直的Radio按钮控制组

1. 创建一个包含Radio按钮控制的HTML结构

在页面上创建一个容器元素，包含多个Radio按钮控制。这些Radio按钮需要有相同的name属性和不同的value属性，以便正确地激活对应的控制内容。

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>选择一个选项：</legend>
        <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
        <label for="radio-choice-1">选项1</label>
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
        <label for="radio-choice-2">选项2</label>
        <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
        <label for="radio-choice-3">选项3</label>
    </fieldset>
</div>

1. 使用CSS样式创建垂直Radio按钮组

使用CSS样式控制Radio按钮控制的位置和外观。以下是示例代码：

.ui-radio {
    display: block;
    margin: 10px 0;
}
.ui-radio label {
    display: block;
    margin-left: 25px;
    padding-left: 25px;
    position: relative;
}
.ui-radio input[type="radio"] {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
}

1. 使用JavaScript脚本实现控制内容的切换

使用jQuery Mobile提供的toggle方法，根据选中的Radio按钮，切换对应的内容显示和隐藏。示例代码如下：

$(function() {
    $('input[name="radio-choice"]').change(function() {
        var choice = $(this).val();
        $('#' + choice).show().siblings('.content').hide();
    });
});

示例说明

以下是两个示例说明，演示如何使用以上攻略制作垂直的Radio按钮控制组。

示例一

假设你需要在一个移动端页面上，制作一个包含两个选项的垂直Radio按钮控制组，可以控制对应的内容显示和隐藏。以下是示例代码：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>选择一个选项：</legend>
        <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
        <label for="radio-choice-1">选项1</label>
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
        <label for="radio-choice-2">选项2</label>
    </fieldset>
</div>

<div id="choice-1" class="content">选项1的内容</div>
<div id="choice-2" class="content" style="display:none">选项2的内容</div>

<style>
    .ui-radio {
        display: block;
        margin: 10px 0;
    }
    .ui-radio label {
        display: block;
        margin-left: 25px;
        padding-left: 25px;
        position: relative;
    }
    .ui-radio input[type="radio"] {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -10px;
    }
</style>

<script>
    $(function() {
        $('input[name="radio-choice"]').change(function() {
            var choice = $(this).val();
            $('#' + choice).show().siblings('.content').hide();
        });
    });
</script>

示例二

假设你需要在一个移动端页面上，制作一个包含三个选项的垂直Radio按钮控制组，可以控制对应的内容显示和隐藏。以下是示例代码：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>选择一个选项：</legend>
        <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
        <label for="radio-choice-1">选项1</label>
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
        <label for="radio-choice-2">选项2</label>
        <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
        <label for="radio-choice-3">选项3</label>
    </fieldset>
</div>

<div id="choice-1" class="content">选项1的内容</div>
<div id="choice-2" class="content" style="display:none">选项2的内容</div>
<div id="choice-3" class="content" style="display:none">选项3的内容</div>

<style>
    .ui-radio {
        display: block;
        margin: 10px 0;
    }
    .ui-radio label {
        display: block;
        margin-left: 25px;
        padding-left: 25px;
        position: relative;
    }
    .ui-radio input[type="radio"] {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -10px;
    }
</style>

<script>
    $(function() {
        $('input[name="radio-choice"]').change(function() {
            var choice = $(this).val();
            $('#' + choice).show().siblings('.content').hide();
        });
    });
</script>

以上是制作垂直的Radio按钮控制组的完整攻略，希望能对你有所帮助。