Question

I am dynamically generating some radio buttons like this:

 degree_info.innerHTML += '<label for="radio">Current Work:</label>\
        <input type="radio" name="work" value = "project" id="project"  onclick = "addMembers(1);" />Project\
        <input type="radio" name="work" value = "thesis" id="thesis" onclick = "addMembers(2);" />Thesis <br />';

The on click event is firing fine, however when I click a radio button, the radio button does not get checked set to true, but instead stays grey.

UPDATE:

returning true from addMembers() does not fix it

UPDATE:

Posted to JSFiddle: http://jsfiddle.net/ELjDg/2/

Also here is my addMembers() method

function addMembers(num){
    committee_members = document.getElementById("committee_members");
    if(committee_members){
        document.getElementById("degree_info").removeChild(committee_members);
    } 
    degree_info = document.getElementById("degree_info");
    degree_info.innerHTML += "<div id='committee_members'></div>";
    for(i = 0; i < num; i++){
        degree_info.lastChild.innerHTML += '<label for="member">Committee Member:</label>\
        <input type="text" name="member' + i + '" />';
    }
    return true;
} 

Answer 1

You need to actually set the checkbox attribute checked to true not just return true from the function. Add in your addMembers(num) the following code:

if(num == 1) document.getElementById("project").checked = true;
else if(num == 2) document.getElementById("thesis").checked = true;

Hope this helps.