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

Question

I'm trying to use this script to hide the question that follows Yes/No question. In other words I want question Yes/No to hide the following question when no is clicked.

Thanks.

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

This is the table that contains the Yes/No question.

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

This is the table that I want to hide when answering no to the first question:

<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

I Applied what Raul Rene and mayabelle to my Script:

This is the script before:

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

This is The Script After:

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

I changed the Yes/No Table:

Before:

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>

After:

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

It Worked Perfectly.

Thank you all.

Answer 2

In addition to what @mayabelle pointed out in his answer (that hide and show should be replaced by style.display = 'none' and style.display = 'block' respectively), your verification in the if statement if ("Delivery_y:checked") will not work. Instead, you can check if an element is checked in javascript in the following way:

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

Alternatively, you can do this in jQuery:

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

Answer 3

"show" and "hide" are not valid values for display. Try "block" (or "inline-block") and "none", respectively, instead.

See here for valid values: http://www.w3schools.com/jsref/prop_style_display.asp

Also, you need to call your ChangeDropdowns() function for it to work.