0

如何创建 html 以对标签以外的不同控件进行单选选择？我想选择一个下拉列表或一组文本输入。

我正在寻找一种在下拉列表前添加单选按钮和在文本输入前添加单选按钮的方法。所以我可以判断用户是想通过下拉菜单输入数据还是通过文本框输入数据

我不确定如何为此设置标记？

在此处输入图像描述

4

2 回答 2

0

这是我提到的另一个例子：http: //jsfiddle.net/pQfDm/5/

HTML

<html>
    <head>
        <title>Radio Selectors</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="header">
                <h2>Header Bar</h2>
            </div>
            <div data-role="content">
                <form>
                    <div class="ui-grid-a">
                        <div class="ui-block-a" style="width: 15%; padding-right: 10px">
                            <fieldset data-role="controlgroup">
                                <input type="radio" name="radio-choice" id="radio-choice-1" />
                                <label for="radio-choice-1" data-iconpos="notext">Choice 1</label>
                            </fieldset>
                        </div>
                        <div class="ui-block-b" style="width: 85%">
                            <input type="text">
                        </div>
                    </div>
                    <div class="ui-grid-a">
                        <div class="ui-block-a" style="width: 15%; padding-right: 10px">
                            <fieldset data-role="controlgroup">
                                <input type="radio" name="radio-choice" id="radio-choice-2" />
                                <label for="radio-choice-2" data-iconpos="notext">Choice 2</label>
                            </fieldset>
                        </div>
                        <div class="ui-block-b" style="width: 85%">
                            <select name="select-choice-0" id="select-choice-0" data-theme="b">
                                <option value="standard">Standard: 7 day</option>
                                <option value="rush">Rush: 3 days</option>
                                <option value="express">Express: next day</option>
                                <option value="overnight">Overnight</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>

查询

$(document).ready(function() {
    $("input[name='radio-choice']").click(function() {
        $("input[name='radio-choice']").each(function() {
            $(this).removeAttr("checked");
        });
        $(this).attr("checked", "checked");
        $("input[type='radio']").checkboxradio("refresh");
    });
});

您可以添加到 JQuery 以在选中/未选中 Radio 时启用/禁用元素。

于 2012-12-05T00:08:01.903 回答
0

看看这个例子：http: //jsfiddle.net/Twisty/pQfDm/

布局网格可以在这里为您提供帮助：

<html>
    <head>
        <title>Radio Selectors</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="header">
                <h2>Header Bar</h2>
            </div>
            <div data-role="content">
                <form>
                    <div class="ui-grid-a">
                        <div class="ui-block-a" style="width: 15%; padding-right: 10px">
                            <fieldset data-role="controlgroup">
                                <input type="radio" name="radio-choice" id="radio-choice-1" />
                                <label for="radio-choice-1" data-iconpos="notext">Choice 1</label>
                            </fieldset>
                        </div>
                        <div class="ui-block-b" style="width: 85%">
                            <input type="text">
                        </div>
                    </div>
                    <div class="ui-grid-a">
                        <div class="ui-block-a" style="width: 15%; padding-right: 10px">
                            <fieldset data-role="controlgroup">
                                <input type="radio" name="radio-choice" id="radio-choice-1" />
                                <label for="radio-choice-1" data-iconpos="notext">Choice 1</label>
                            </fieldset>
                        </div>
                        <div class="ui-block-b" style="width: 85%">
                            <select name="select-choice-0" id="select-choice-0" data-theme="b">
                                <option value="standard">Standard: 7 day</option>
                                <option value="rush">Rush: 3 days</option>
                                <option value="express">Express: next day</option>
                                <option value="overnight">Overnight</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>
于 2012-12-04T22:17:49.053 回答