JavaScript function that toggles element visibility according checked radio input

This function has a set of radio inputs, for each radio there is a hidden text input. When a radio input is checked it shows its chained text input.

I've done it with a function constructor, and I could have done this with closures or with simpler invocation patterns. My idea is to have some robust function which I could extend.

I haven't tested browser compatibility, which is somehow important for my market (IE8 lovers).

jsFiddle

Yellow
Brown
Orange
Purple

`// INSTRUCTIONS
// There is a hidden text input for each radio input.
// Checked radio will show its chained text input.
// They're chained by the radio value and the text id
// the radio value makes a string that is used as the id of the text

// Constructor Function
var JavaScript_form = function() {
this.radios = document.querySelectorAll('input[type="radio"]');
}

// Public method of instance
JavaScript_form.prototype.radio_hide_element = function() {

// inputs that will be hidden
var els_hidden = document.getElementsByClassName('radio-condition'),
els_hidden_length = els_hidden.length;

// loop each radio input
[].forEach.call(this.radios, function (el) {
var i = 0;
for (; i

I'd use data attributes on the radio buttons to point to the IDs of the text inputs. Then you don't have to worry about constructing the ID strings in code. For IE8, use getAttribute()

I'd also use external CSS to default all the text fields to hidden -- to avoid that first nested loop in your JavaScript.

I'd then use a CSS class to toggle the visibility of the text fields (if the class is present, the field is visible, if the class is not present, the field is hidden). This makes it easier to locate the currently visible input (document.getElementsByClass), instead of having to iterate through all the text fields every time a radio button is clicked.

If you use data attributes and CSS classes, the event handler becomes pretty generic. You could use "event delegation" and attach the handler once to the parent element (avoiding that forEach loop -- which is not supported natively in IE8).

FYI, the ` tag is significantly less usable without it either encompassing both the radio button and label text, or having its for` attributed defined.

StackExchange Code Review Q#60851, answer score: 4