0

html を作成して、ラベル以外のさまざまなコントロールをラジオで選択するにはどうすればよいですか? ドロップダウンまたはテキスト入力のグループを選択したい。

ドロップダウンの前にラジオ ボタンを追加し、テキスト入力の前にラジオ ボタンを追加する方法を探しています。ユーザーがドロップダウンからデータを入力するのか、テキスト ボックスからデータを入力するのかがわかります。

このマークアップをどのように設定すればよいかわかりません。

ここに画像の説明を入力

4

2 に答える 2

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 に答える
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>

Jクエリ

$(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に追加できます。

于 2012-12-05T00:08:01.903 に答える