0

我正在 Javascript/Jquery 中寻找一段代码来显示和隐藏基于单选按钮的 html 表单，以便它也可以在 iPhone/iPad 上工作。

这是我所期待的。

选择：
拾音器（单选按钮）
交货（单选按钮）
根据上面的选择

如果是皮卡。

显示一个带有少量输入的 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 回答