Question

My code snippet for radio buttons is –

<input type="radio" name="isPush" id="isPushYes" <? if($isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "Yes"?></input>
<input type="radio" name="isPush" id="isPushNo" <? if(!$isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "No"?></input>
<table id="emailTable"><tr><td>...</td></tr></table>

The value of isPush will be 0 or 1. So one of my radio buttons will always be selected. And selecting either of the radio buttons initially is not in my hands.

Now, For the table, I want to set display: none when when second radio button is selected and set display: visible when first radio button is selected.

So which event should I put? I certainly can’t put onclick.

Answer 1

You need to check the selected radio onload, as well as onchange. This means the table will be hidden to start with, if No is selected by default.

jsFiddle Demo

function checkRadio()
{
        var tbl = document.getElementById("emailTable");

        if(document.getElementById("isPushYes").checked)
        {
           tbl.style.display = "";
        }
        else
        {
            tbl.style.display = "none";
        }   
}

window.onload = function()
{
    document.getElementById("isPushYes").onchange = checkRadio;
    document.getElementById("isPushNo").onchange = checkRadio;

    checkRadio();
}​

Another option is without the onload event, you set the display with PHP:

<table id="emailTable" <?php if(!$isPush) echo 'style="display:none"'; ?>><tr><td>...</td></tr></table>