How do I make an html radio button display as selected at launch time when the stored value="on"?

Question

Hi guys,

Using Javascript and html:

I have a list containing radio buttons that is dynamically loaded at launch time based on stored data. Even though the stored value of the radio is "on" the radio at launch does not display as selected.

I cant figure out what I'm missing.

if (defsales !== undefined) {
    $('.defsales', newRow).val(defsales); }

defsales being the class identifier of the radio.

Do I need an additional argument to check the value? Or, do I need to add something that reapplies the value after launch?

I've been working at this problem long enough that I'm getting confused.

Please excuse my ignorance,

If it helps, here is the rest of the function:

function addSalespersonRow(id, name, phone, email, defsales) {
var newRow = $('<tr>'+
    '<td><input type="hidden" class="id" /><input class="name" size="20" /></td>'+
    '<td><input class="phone" size="15"/></td>'+
    '<td><input class="email" size="30"/></td>'+
    '<td><input type="radio" name="salespersons" class="defsales" /></td>'+
    '<td><a href="#" onclick="$(this).parent().parent().remove(); return false;">Delete</a></td>'+
    '</tr>');
if (id === undefined) {
    id = new Date().getTime();
}
$('.id', newRow).val(id);


if (name !== undefined) {
    $('.name', newRow).val(name);
}
if (phone !== undefined) {
    $('.phone', newRow).val(phone);
}
if (email !== undefined) {
    $('.email', newRow).val(email);
}
if (defsales !== undefined) {
    $('.defsales', newRow).val(defsales);
}
$('#salespersons-table tbody').append(newRow);

return false;
}

Here was the code that worked correctly.

if (defsales !== undefined && defsales == "on") {
    $('.defsales', newRow).attr('checked', true);
}

Thanks to Matt, for pointing me in the right direction.

Answer 1

I'm not entirely sure what it is you're doing outside of this problem or more importantly why you're doing it... but I think this may solve/help with your problem (untested).

if (defsales !== undefined) {
  $('.defsales').each(function() {
    $(this, newRow).val(defsales);
    if($(this).val() == 'on') {
      $(this).attr('checked', 'checked');
    }
  });
}

Answer 2

Using JQuery you should be able to check any radio button like this.

$(".dfsales").attr("checked", true); 

EDIT:

This does seem to work:

$(document).ready(function(){
    var dfsales = 1;
    $('<input type="radio" name="colorInput" id="test" value="2">').appendTo($("#list"));
    if(dfsales !== undefined){
        $('#test').attr('checked', true);
    }
})

EDIT 2: Eric, assuming you only care to set the value of the radio button if dfsales == on this will work.

if (defsales !== undefined && defsales == 'on') {
    $('.defsales', newRow).val(defsales).attr('checked', true);
}

if you want the radio button value to be set regardless, then try something like this:

if (defsales !== undefined){
    $('.defsales', newRow).val(defsales);
    if(defsales == 'on'){
        $('.defsales', newRow).attr('checked', true);
    }
}

Does this help?