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

How to Hide a table using Radio button using Java Script in HTML?

本文关键字：Java 脚本 HTML 何使用 单选按钮 隐藏      更新时间：2023-09-26

我正在尝试使用此脚本来隐藏"是/否"问题后面的问题。换句话说，我希望问题"是/否"在单击"否"时隐藏以下问题。

谢谢。

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

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

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

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

除了@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'))

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

它工作得很好。

谢谢大家。

相关文章：