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

Question

我正在尝试使用此脚本隐藏是/否问题之后的问题。 换句话说，当单击否时，我想要问题是/否来隐藏以下问题。

谢谢。

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

Answer 1

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

有效值请参见此处： http : //www.w3schools.com/jsref/prop_style_display.asp

另外，您需要调用ChangeDropdowns()函数才能使其正常工作。

Answer 2

除了@mayabelle在回答中指出的内容（分别将hide和show分别替换为style.display = 'none'和style.display = 'block' ）之外， style.display = 'block'在if语句if ("Delivery_y:checked")无法正常工作。 相反，您可以按照以下方式检查javascript中是否检查了元素：

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

或者，您可以在jQuery中执行此操作：

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

Answer 3

我将Raul Rene和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>

这是以下脚本：

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

它工作完美。

谢谢你们。