0

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

谢谢。

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

3 回答 3

3

"show"并且"hide"不是 的有效值display。分别尝试"block"(或"inline-block") 和"none"。

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

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

于 2013-10-23T14:35:36.567 回答
1

除了@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-23T14:43:24.470 回答
0

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

它工作得很好。

谢谢你们。

于 2013-10-24T06:21:29.417 回答