Question

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

这是我所期待的。

Choice:
Pickup (Radio Button)
Delivery (Radio Button)

基于上面的选择

If it is Pickup.

Display a HTML FORM with few inputs to show the address of the place where items are being picked up.

If it is Delivery

Display a HTML Form with few inputs to accept delivery address.

and submit the data.

有什么建议吗？？

我尝试使用选择框而不是单选框。

<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>

Answer 1

主要问题是你的HTML无效。 H代码不能是<p>的子代，因此浏览器会将其呈现在<p>之外，并将<p>留空，这就是您没有看到内容隐藏的原因

此外，您无法在页面中复制ID，而是使用类。根据定义，ID是唯一的

将包含无效子项的<P>代码更改为<div>并调整ID可使代码正常工作

DEMO http://jsfiddle.net/a2Uh6/

如何基于单选按钮显示和隐藏HTML表单

1 个答案: