IE6-IE7 Radio Button JQuery Problem: Selection does not work

Sometimes we need to create html radio button control. If we need to create radio button dynamically based on some other condition, we will surely create it using JavaScript. Using JQuery definitely makes our JavaScript life easier. We sometimes need to create the radio button group and want to have some event handler assigned to it. Here we will see the usual problems we might face while creating radio button using JQuery, especially for IE6 and IE7.

Problem with Radio button group creation using JQuery:

If we develop and test at IE8 environment, we might code like this and this work.
I have a RadioGroup container div.

<div id="RadioGroupHolder">&nbsp;</div>

I want to have 3 radio buttons inside this div dynamically.

function Dynnamic_RadioGroup_Using_JQuery() {

var $PFS = {};

var RadioGroup_Click_EventHandler = function(e) {

$PFS.measure = $(this).attr('value');

}

var count = 1;

var radioDOSE = $('<input type="radio" value="DOSE">Per dose</input>')

.click(RadioGroup_Click_EventHandler)

.attr('name', 'RadioGroupName_' + count);

var radioKG = $('<input type="radio" value="KG">Per Kg</input>')

.click(RadioGroup_Click_EventHandler)

.attr('name', 'RadioGroupName_' + count);

var radioM2 = $('<input type="radio" value="M2">Per m2</input>')

.click(RadioGroup_Click_EventHandler)

.attr('name', 'RadioGroupName_' + count);

$('#RadioGroupHolder')

.append(radioDOSE)

.append(radioKG)

.append(radioM2);

}

I am testing this code in IE8, it will show the below radio buttons.



This works perfectly without any problem. But while testing this same code in IE6 and IE7, this will have some problem. Clicking on radio buttons will not select the radio button. It will always keep it unselected.


Resolution to the radio group creation problem using JQuery:

There are 2 problems for which the code is not working in IE6 and IE7.

1. Note the code for creating one radio button.
   
   

   var radioDOSE = $('<input type="radio" value="DOSE">Per dose</input>')

   .click(RadioGroup_Click_EventHandler)

   .attr('name', 'RadioGroupName_' + count);

   The yellow marked section is first creating the DOM element, but not yet inserted in DOM. See that we have a closing input tag</input>. Surely this is not valid. HTML input tags don't have a closing input tag. It should end like this.
   
   
   <input type="radio" value="DOSE" />
   
   But IE8 is good enough to handle this and it can create the DOM correctly whereas IE6 and IE7 do not. This may make any unexpected problem later on. So we can easily avoid doing mistake. But what about the Per Dose text that we want to see beside the radio button. If we end input tag, we have to write the text showing beside the radio button separately, not inside the opening and closing input tag.
2. The second problem with the code is
   
   

   var radioDOSE = $('<input type="radio" value="DOSE">Per dose</input>') 

   .click(RadioGroup_Click_EventHandler)

   .attr('name', 'RadioGroupName_' + count)

   
   

   We must have a name for the radio buttons. To make the radio buttons selection exclusive, meaning we will be able to select only one radio button from the group, we must make the name of the radio buttons same. Here what we are doing is creating the radio button first then assigning a click eventhandler, then assigning the name. No problem, infact. IE8 works fine. But in IE6 and IE7, if we create a radio button without giving the name and later assign the name, IE6 and IE7 cannot make the radio group and it does not work when we click the radio buttons.

   
   

   So we need to give name of the radio buttons at the beginning while we are creating the object.

   
   

   var radioDOSE =$('<input type="radio" value="DOSE" name="' + 'RadioGroupName_' + count + '"/>')

   .click(RadioGroup_Click_EventHandler);

var radioKG = $('<input type="radio" value="KG" name="' + 'RadioGroupName_' + count + '" />')

.click(RadioGroup_Click_EventHandler);

var radioM2 = $('<input type="radio" value="M2" name="' + 'RadioGroupName_' + count + '" />')
.click(RadioGroup_Click_EventHandler);

Doing this will resolve our problem in IE6 and IE7. Pretty easy fix, but difficult to know that this works. But yes, it works.