JavaScript / JQuery: Create Horizontal Radio Button

In my course of project, I find a need to use JavaScript/JQuery to dynamically add element to my HTML. Below is a function to create JQuery Mobile horizontal radio button.

.trigger(‘create’) is need to refresh JQuery Mobile UI otherwise the UI will appear in native HTML.
containerId: normally is the <div> ID.
elementId: the ID & name f the CheckBox
eventName: onchange event name for event handler to identify
textArray, valueArray: Text-Value pair of the list of radio box

function CreateHorizontalRadioButtons(containerId, elementId, eventName, textArray, valueArray) {
    var div = document.getElementById(containerId);

    var content = '&lt;fieldset data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot; &gt;';

    for (i = 0; i &lt; textArray.length &amp;&amp; i &lt; valueArray.length; i++) {
        content += '&lt;input type=&quot;radio&quot; name=&quot;' + elementId + '&quot; id=&quot;' + elementId + String(i) + '&quot; value=&quot;' + valueArray[i] + '&quot; onchange=&quot;SelectedRadioIndexChanged(\'' + eventName + '\', this)&quot; /&gt;';
        content += '&lt;label for=&quot;' + elementId + String(i) + '&quot;&gt;' + textArray[i] + &quot;&lt;/label&gt;&quot;;
    }

    content += '&lt;input type=&quot;radio&quot; name=&quot;' + elementId + '&quot; id=&quot;' + elementId + String(valueArray.length) + '&quot; value=&quot;&quot; onchange=&quot;SelectedRadioIndexChanged(\'' + eventName + '\', this)&quot; /&gt;';
    content += '&lt;label for=&quot;' + elementId + String(valueArray.length) + '&quot;&gt;Unknown&lt;/label&gt;';
    content += '&lt;/fieldset&gt;'
    $('#' + containerId).append(content).trigger('create');
}

Below is method to create horizontal radio button mini theme.

function CreateMiniHorizontalRadioButtons(containerId, elementId, eventName, textArray, valueArray) {
    var div = document.getElementById(containerId);

    var content = '&lt;fieldset data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot; data-mini=&quot;true&quot; &gt;';

    for (i = 0; i &lt; textArray.length &amp;&amp; i &lt; valueArray.length; i++) {
        content += '&lt;input type=&quot;radio&quot; name=&quot;' + elementId + '&quot; id=&quot;' + elementId + String(i) + '&quot; value=&quot;' + valueArray[i] + '&quot; onchange=&quot;SelectedRadioIndexChanged(\'' + eventName + '\', this)&quot; /&gt;';
        content += '&lt;label for=&quot;' + elementId + String(i) + '&quot;&gt;' + textArray[i] + &quot;&lt;/label&gt;&quot;;
    }

    content += '&lt;/fieldset&gt;'
    $('#' + containerId).append(content).trigger('create');
}
Advertisements
JavaScript / JQuery: Create Horizontal Radio Button

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s