如何在HTML中使用Java脚本使用单选按钮隐藏表格？

我试图用这个脚本来隐藏遵循是/否问题的问题。换句话说，我希望问题是/否在单击否时隐藏以下问题。如何在HTML中使用Java脚本使用单选按钮隐藏表格？

谢谢。

<script> 
    function ChangeDropdowns() { 
     if ("Delivery_y:checked") { 
      document.getElementById('BuyProduct_H').style.display = 'block'; 
     } else if ("Delivery_n:checked") { 
      document.getElementById('BuyProduct_H').style.display = 'none'; 
     } 
    } 
</script>

这是包含是/否问题的表格。

<table id="YesNo" style="width:100%;"> 
     <tr> 
      <td class="auto-style2" colspan="3">*&nbsp; Have you recently bought any  electronic products from AlGhanim electronics that required delivery/ Installation Service? </td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td class="auto-style23"> 
    <input type="radio" name="Delivery" id ="Delivery_y"  onclick="displayResult(this.value)" value="Yes" >Yes</td> 
      <td>(Continue)</td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td class="auto-style23"> 
    <input type="radio" name="Delivery" id ="Delivery_n"  onclick="displayResult(this.value)" value="No">No</td> 
      <td>(Terminate)</td> 
     </tr> 
    </table>

这是我想回答是否定的第一个问题时，隐藏表：

<table name="BuyProduct" id ="BuyProduct_H" style="width:100%;"> 
     <tr> 
      <td class="auto-style2" colspan="3">1-&nbsp;&nbsp;&nbsp;&nbsp; What were  the products that you bought?   </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td colspan="2"> 
    <asp:CheckBox ID="Button11" Text="a. Air Conditioning" runat="server" /> </td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td colspan="2"> 
    <asp:CheckBox ID="Button12" Text="b. TV Radio (TV, Home Theatre, etc.)"  runat="server" /></td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td colspan="2"> 
    <asp:CheckBox ID="Button13" Text="c. Refrigeration" runat="server" /> </td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td colspan="2"> 
    <asp:CheckBox ID="Button14" Text="d. Laundry (Washer, Dryer, etc)" runat="server"  /> </td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td colspan="2"> 
    <asp:CheckBox ID="Button15" Text="e. Dishwasher" runat="server" /></td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td colspan="2"> 
    <asp:CheckBox ID="Button16" Text="f. Water Treatment (Water Dispencer)"  runat="server" /> </td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td colspan="2"> 
    <asp:CheckBox ID="Button17" Text="g. Small Housewares (Microwave, Kitchen  appliances, etc.)" runat="server" /> 
       <br /> 
    <asp:CheckBox ID="Button18" Text="h. Others Please Specify" runat="server" /> </td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td class="auto-style51"></td> 
      <td> 
    <asp:TextBox ID="TextBox26" runat="server"></asp:TextBox> 
      </td> 
      <td> 
       &nbsp;</td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td colspan="2"> 
       &nbsp;</td> 
     </tr> 
     </table>

来源

2013-10-23 user2751035

"show"和"hide"不是为display有效值。改为分别尝试"block"（或"inline-block"）和"none"。

看到这里的有效值：http://www.w3schools.com/jsref/prop_style_display.asp

此外，您还需要打电话给你ChangeDropdowns()功能，为它工作。

来源

2013-10-23 14:35:36 mayabelle

http://www.w3fools.com/ – Reeno

在这种情况下，他们是正确的。以下是另一个参考链接，其中显示属性的有效值相同：http://docs.webplatform.org/wiki/css/properties/display（此链接直接从您的w3fools.com网站获取） – mayabelle

您的'幸运的@mayabelle。上次我发布W3Schools，我得到了downvote棒（有很好的理由）哈哈。但我同意你的看法。 W3Schools可能会很无聊，但他们似乎知道这些基础知识。 – usernolongerregistered

除了什么@mayabelle在他的回答中指出（即隐藏和显示应分别style.display = 'none'和style.display = 'block'代替），您在验证if语句if ("Delivery_y:checked")将无法正常工作。相反，你可以检查元素是否以JavaScript检查下列方式：

if (document.getElementById('Delivery_y').checked)

或者，你可以在jQuery的做到这一点：

if ($('Delivery_y').is(':checked'))

来源

2013-10-23 14:43:24

我申请什么劳尔刘若英和mayabelle给我的脚本：

这是脚本之前：

<script> 
function ChangeDropdowns() { 
    if ("Delivery_y:checked") { 
     document.getElementById('BuyProduct_H').style.display = 'block'; 
    } else if ("Delivery_n:checked") { 
     document.getElementById('BuyProduct_H').style.display = 'none'; 
    } 
} 
</script>

这是脚本的前前后后ER：

<script> 
    function ChangeDropdowns() { 
     if (document.getElementById('Delivery_y').checked) { 
      document.getElementById('BuyProduct_H').style.display = 'block'; 
     } else if (document.getElementById('Delivery_n').checked) { 
      document.getElementById('BuyProduct_H').style.display = 'none'; 
     } 
    } 
</script>

我换了是/否表：

前：

input type="radio" name="Delivery" id ="Delivery_y"   onclick="displayResult(this.value)" value="Yes" >Yes</td> 
     <td>(Continue)</td> 
    </tr> 
    <tr> 
     <td class="auto-style28">&nbsp;</td> 
     <td class="auto-style23"> 
    <input type="radio" name="Delivery" id ="Delivery_n"   onclick="displayResult(this.value)" value="No">No</td> 
     <td>(Terminate)</td> 
    </tr>

后：

<input type="radio" name="Delivery" id ="Delivery_y"  onclick="displayResult(this.value)" onchange="ChangeDropdowns()" value="Yes" >Yes</td> 
      <td>(Continue)</td> 
     </tr> 
     <tr> 
      <td class="auto-style28">&nbsp;</td> 
      <td class="auto-style23"> 
     <input type="radio" name="Delivery" id ="Delivery_n"  onclick="displayResult(this.value)" onchange="ChangeDropdowns()" value="No">No</td> 
      <td>(Terminate)</td> 
     </tr>

它完美地工作。

谢谢大家。

来源

2013-10-24 06:21:29 user2751035

如何在HTML中使用Java脚本使用单选按钮隐藏表格？

回答

相关问题