How can I pass the element name into a function?

[tarek01]

Hi,

I made a function whereby clicking a radio button will show a hidden radio button sub-group, and when it's unchecked, the radio button sub-group hides again and all the radios in the sub-group are made unchecked.

The problem is I don't know how to pass the 3rd parameter, 'custom' in this example, into the function.

HTML:

<input type="radio" name="product" value="standard"
   onclick="showSubGroup(this,'customOptions','custom');" />
<input type="radio" name="product" value="custom"
   onclick="showSubGroup(this,'customOptions','custom');" />
<div id="customOptions" style="display:none">
  <input type="radio" name="custom" value="1" />
  <input type="radio" name="custom" value="2" />
  <input type="radio" name="custom" value="3" />
</div>

JAVASCRIPT:

function showSubGroup(selection,showHideItem,btnGroup) {
   var parentForm = selection.form;
   if (selection.value == "custom") {
      document.getElementById(showHideItem).style.display = "block";
   } else {
      for (i=0; i < parentForm.btnGroup.length; i++) {
         parentForm.btnGroup[i].checked = false;
      }
      document.getElementById(showHideItem).style.display = "none";
   }
}

If I hardcode the name of the input, it works. For example:
(i=0; i < parentForm.custom.length; i++)
parentForm.custom[i].checked = false

How can I pass the element name so it's variable inside the function?

Thanks in advance.

[Dormilich]

use parentForm[btnGroup]

[tarek01]

Dormilich, I tried that, but it doesn't work.

[Dormilich]

then something’s wrong with your implementation.

EDIT: correction, parentForm = selection.form is wrong

[tarek01]

Dormilich, you're right! That works!! I must've clicked too fast before the javascript finished loading. I checked it in FF and IE, and it works perfectly.

I left this code as is:
parentForm = selection.form;


You da man, Dorm!