0

iPhone/iPadでも機能するように、ラジオボタンに基づいてHTMLフォームを表示および非表示にするJavascript/Jqueryのコードを探しています。

これが私が期待しているものです。

選択：
ピックアップ（ラジオボタン）
配送（ラジオボタン）
上記の選択に基づいて

ピックアップなら。

アイテムがピックアップされている場所の住所を表示するために、入力がほとんどない HTML フォームを表示します。

配達の場合

配送先住所を受け入れるための入力がほとんどない HTML フォームを表示します。

そしてデータ提出。

助言がありますか..？

ラジオボックスではなくセレクトボックスで次のことを試しました。

<pre>

    <!doctype html>
    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

        <script>
            $(document).ready(function (){
                $("#state").change(function() {
                    // foo is the id of the other select box 
                    if ($(this).val() != "Pickup") {
                        $("#foo").show();
                    }else{
                        $("#foo").hide();
                    } 
                });
            });
        </script>

    </head>


    <body>
    <h3> Select Pickup Or Delivery:</h3>
        <p>
            <select id="state" name="state" style="width: 212px;">
                <option value="Pickup">Pickup</option>
                <option value="Delivery">Delivery</option>
            </select>
        </p>

        <p id="foo" style="display:none;">

    <h4> Pickup Location:</h4>
            123 Main St, Edison NJ
        </p>
        <p id="foo" style="display:none;">
            <form>
    <h3> Enter your address below:</h3>
    <label>Address1</label> <input type="text" name="address1"><br>
    <label>Address2</label> <input type="text" name="address2"><br>
    <label>City</label>     <input type="text" name="city"><br>
    <label>State</label>    <input type="text" name="state"><br>
    <label>Zip Code</label> <input type="text" name="zipcode"><br>
        </p>
    </body>

</pre>
4

1 に答える 1

1

主な問題は、html が無効であることです。Hタグを子にすることはできない<p>ため、ブラウザはそれらを の外側にレンダリングし、空の<p>まま<p>にします。そのため、非表示のコンテンツが表示されません。

また、ページ内で ID を複製することはできません。代わりにクラスを使用してください。定義上、ID は一意です

<P>無効な子を持つタグを変更して<div>IDを調整すると、コードが機能します

デモhttp://jsfiddle.net/a2Uh6/

于 2013-01-27T03:05:37.743 に答える