CODEWITHSUNDEEP
javascripthtmltoggleshow-hide
codeChris
codeChris

Reputation: 885

I want to show tables when radio buttons are selected

I am trying to show tables onClick or onSelect of a couple of checkboxes. I have a checkbox for 'standard' which, when selected, should display a table of standard options, and I have a checkbox for 'customized' which, when selected, should display a table of customized options.

Right now the tables toggle but won't show at the same time. In other words, if both are checked, I need both tables to display, one under the other. If only 'standard' is checked, then only 'standard' options show, and if only 'customized' is checked, then only 'customized' options show.

Here is a fiddle: http://jsfiddle.net/4tcRD/2/

Here is my JS:

function toggleTables(which)
{

    if(which == "1") {
        document.getElementById('customize').style.display = "table";
        document.getElementById('standard').style.display = "none";

        }
    if(which == "2") {
        document.getElementById('standard').style.display = "table";
        document.getElementById('customize').style.display = "none";

        }
}

Here is my HTML:

<input name="checkbox1" type="checkbox" id="customize_1" onClick="toggleTables('2')" value="checkbox" />
<label for="checkbox1"></label> Standard&nbsp;&nbsp;&nbsp;
<input name="checkbox2" type="checkbox" id="customize_0" onClick="toggleTables('1')" value="checkbox" checked="checked" />
Customize


<br />
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
    <tr><td>customize</td></tr>                   
</table>

<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard" style="display: none">
    <tr><td>standard</td></tr>                   
</table>

Please give me a hand. - UPDATED WITH CHECKBOXES**

Upvotes: 0

Views: 3184

Answers (1)

bullfrog
bullfrog

Reputation: 1633

Can just check the status of checkbox within function.

function toggleTables()
{
    var isCustomize = document.getElementById('customize_1').checked; 
    var isStandard = document.getElementById('standard_1').checked;  

    var customize = document.getElementById('customize'); 
    var standard = document.getElementById('standard');    

    customize.style.display = isCustomize  ? 'table' : 'none';
    standard.style.display = isStandard  ? 'table' : 'none';
}​

http://jsfiddle.net/4tcRD/3/

Upvotes: 2

Related Questions