Toggling between two radio buttons

Question

I have read multiple stackoverflow posts but none have seemed to help me understand where my error is. I am trying to have two radio buttons that by default the long form is checked and the short form is not checked, but if the short form is checked the the long form is not checked. If one were to also un-check the short form then the long form should defaultly be checked off.

<input type="radio" id="shortForm" onChange="toggle(this);"> Short Form
<input type="radio" id="longForm" onChange="toggle(this);"> Long Form

function toggle(chkBox)
{    
    if (chkBox.checked)
    {
        var previousCheckId;

        if (previousCheckId) 
        {
            document.getElementById(previousCheckId).checked = false;
        }
        previousCheckId = chkBox.getAttribute('id');
    }
}

http://jsfiddle.net/na8qL/

I am trying to avoid using jquery and just use pure javascript and html.

I got this so far but my words are not aligned properly? How can I make them alligned?

<input type="radio" id="shortForm" name="frm"style="position:absolute; top:10px; right:875px"> Short Form </input>
<input type="radio" id="longForm" name="frm" style="position:absolute; top:10px; right:475px"> Long Form </input>

Answer 1

No need of JavaScript. Give names to the elements:

<input type="radio" id="shortForm" name="frm"> Short Form
<input type="radio" id="longForm" name="frm"> Long Form

JSFiddle: http://jsfiddle.net/bjyjv/