0

このスクリプトを使用して、Yes/No の質問に続く質問を非表示にしようとしています。つまり、いいえがクリックされたときに次の質問を非表示にするために、はい/いいえの質問が必要です。

ありがとう。

<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 に答える
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 に答える