Sub Menu GUI display only on Checkbox selection, hide when unselected.

Hi All,

Can somebody help me with the GUI stuff in the below code.

I've this code to display two menus,

Coordinates(Checkbox) with three Radio button items.

and similarly textboxes (checkbox) with two radio button items.

So what I would here like to do is highlight the radio buttons only when Checkbox is clicked.

Otherwise just hide them

Currently the code displays the box everytime@

// Config values






var dlg = new Window('dialog', 'Title');
dlg.frameLocation = [100,100];
dlg.size = [300,350];


dlg.intro = dlg.add('statictext', [20,10,220,30] );
dlg.intro.text = '"Select 1 (or) more items"';






var CoordinatesCheckBox = dlg.add ("checkbox", [20,90,150,110], "Coordinates");


var centerCoordinateRB = dlg.add ("radiobutton",[40,110,200,130] , " Top ");
var midCenterCoordinateRB = dlg.add ("radiobutton",[40,130,200,150] , " Middle ");
var leftCoordinateRB = dlg.add ("radiobutton", [40,150,200,170], " Bottom ");




var textAreasCheckBox = dlg.add ("checkbox", [20,170,150,190], " Text");
var horizontalSwipeRB = dlg.add ("radiobutton", [40,190,150,210], " Horizontal ");
var verticalSwipeRB = dlg.add ("radiobutton", [40,210,150,230], " Vertical ");


dlg.GenerateButton = dlg.add('button', [20,270,150,300], 'Generate', 'CenterCoord');




// Button Event Handler
function clickHandler(e)
{
    generateDimensions();
}
dlg.GenerateButton.onClick = clickHandler;                                            
dlg.GenerateButton.addEventListener('mousedown', clickHandler);






dlg.show();






var bCoordinatesCheckBox = false;
CoordinatesCheckBox.onClick = function ()
{
    if (CoordinatesCheckBox.value == true)    {          bCoordinatesCheckBox = true;          clearCheckBoxes(eAssetCoordinatesChecked);     }     else         bCoordinatesCheckBox = false;
}


var btextAreasCheckBox = false;
textAreasCheckBox.onClick = function ()
{
    if (textAreasCheckBox.value == true)    {          btextAreasCheckBox = true;          clearCheckBoxes(eSwipeAreasChecked);     }    else          btextAreasCheckBox = false;


}


var bHorizontalSwipe = false;
horizontalSwipeRB.onClick = function ()
{
    if (horizontalSwipeRB.value == true)         bHorizontalSwipe = true;
}


var bVerticalSwipe = false;
verticalSwipeRB.onClick = function ()
{
    if (verticalSwipeRB.value == true)         bVerticalSwipe = true;
}




var bleftCoordinateRB = false;
leftCoordinateRB.onClick = function ()
{
    if (leftCoordinateRB.value == true)         bleftCoordinateRB = true;
}


var bmidCenterCoordinateRB= false;
midCenterCoordinateRB.onClick = function ()
{
    if (midCenterCoordinateRB.value == true)         bmidCenterCoordinateRB = true;
}




var bcenterCoordinateRB = false;
centerCoordinateRB.onClick = function ()
{
    if (centerCoordinateRB.value == true)         bcenterCoordinateRB = true;
}