选择复选框时显示特定行

时间:2015-02-25 20:59:07

标签: jquery html css radio-button show-hide

在我的表单中,我希望当用户选择第一个包单选按钮,即400美元时,在步骤2中应该出现一个下拉列表,即选择字符串。

但是当有人选择第二个套餐,即550美元时,应该会出现两个下拉列表,分别接受来自用户的两个不同输入。

同样,当选择第三个单选按钮时,我需要三个字段,第四个我需要四个下拉列表。

我尝试了很多东西,但它没有成功。这是代码

<form name="form1" method="post" action="orderform.php">
              <table width="100%" border="1" cellpadding="5">
<tr>
                  <td colspan="2" align="center"><strong class="style2">WILSON PACKAGE INFORMATION</strong></td>
                </tr>
                <tr>
                  <td align="right" valign="top"><strong class="style1">Step1 :<br>Select your Package</strong></td>
                  <td align="left"><p>
                    <label>
                      <input type="radio" name="package" value="$400 for 2 Wilson Rackets (msrp $623)" id="package_0">
                     <strong>$400 for 2 Wilson Rackets (msrp $623)</strong>
                     <br>6 sets of Wilson or Luxilon string.
                     <br>Tour 9pk bag.
                     <br>Pro Overgrip 12 pk.</label>
                    <br><br>
                    <label>
                      <input type="radio" name="package" value="$550 for 3 Wilson Rackets (msrp $949)" id="package_1">
                      <strong>$550 for 3 Wilson Rackets (msrp $949)</strong>
                      <br>12 sets of Wilson or Luxilon string.
                     <br>Tour 15pk bag.
                     <br>Pro Overgrip 12 pk.</label>
                    <br><br>
                    <label>
                      <input type="radio" name="package" value="$675 for 4 Wilson Rackets (msrp $1256)" id="package_2">
                      <strong>$675 for 4 Wilson Rackets (msrp $1256)</strong>
                      <br>18 sets of Wilson or Luxilon string.
                     <br>Tour 15pk bag.
                     <br>Pro Overgrip 12 pk.</label>
                    <br><br>
                    <label>
                      <input type="radio" name="package" value="$800 for 5 Wilson Rackets (msrp $1562)" id="package_3">
                      <strong>$800 for 5 Wilson Rackets (msrp $1562)</strong>
                      <br>24 sets of Wilson or Luxilon string.
                     <br>Tour 15pk bag.
                     <br>Pro Overgrip 12 pk.</label>
                    <br><br>
                  </p></td>
                </tr>
                <tr>
                  <td align="right" valign="top"><strong class="style1">Step 2:<br>Choose your String</strong><br>(Must order in multiples of 6)</td>
                  <td align="left"><label for="strings"></label>
                    <select name="strings" id="strings">
                      <option selected>Choose... </option>
                      <option value="Luxilon 4G Soft ">Luxilon 4G Soft </option>
                      <option value="Luxilon 4G 125">Luxilon 4G 125 </option>
                      <option value="Luxilon 4G Rough 125">Luxilon 4G Rough 125 </option>
                      <option value="Luxilon ALU Power 125 Silver">Luxilon ALU Power 125 Silver </option>
                      <option value="Luxilon ALU Power Rough 125 Silver">Luxilon ALU Power Rough 125 Silver </option>
                      <option value="Luxilon Savage 127 Black">Luxilon Savage 127 Black </option>
                      <option value="Wilson NXT 16 ">Wilson NXT 16 </option>
                      <option value="Wilson NXT 17">Wilson NXT 17 </option>
                      <option value="Wilson Revolve 16">Wilson Revolve 16 </option>
                      <option value="Wilson Revolve 17">Wilson Revolve 17 </option>
                      <option value="Wilson Sensation 16">Wilson Sensation 16 </option>
                      <option value="Wilson Sensation 17">Wilson Sensation 17 </option>
                  </select></td>
                </tr>

1 个答案:

答案 0 :(得分:0)

以下是w3schools的教程文本: http://www.w3schools.com/jquery/jquery_hide_show.asp

$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});