Question

I am adding controls to an array in JQuery like this:

$('#tblControls tr').each(function () {
var radioButtonText = $(this).find("#td2").find("#chxBxValue").val();
var isSelected = $(this).find("#td2").find("#chxBxSelected");
var $newRdBtn = '';

if (isSelected == 1) {
    $newRdBtn = $('<input />').attr({ id: 'rdBtn', type: 'radio', name: 'rdBtngrp', selected: 'true' }) +'<label for="rdBtn">' + radioButtonText + '</label>';
} else {
    $newRdBtn = $('<input />').attr({ id: 'rdBtn', type: 'radio', name: 'rdBtngrp' }) + '<label for="rdBtn">' + radioButtonText + '</label>';
}

rblArray.push($newRdBtn);
});

Later on in another function I try to add the contents of rblArray to a like so

$.each(rblArray, function (intIndex, objValue) {
$("#myPlaceHolder").append(rblArray[intIndex]);
$("#myPlaceHolder").append('<br/>');
 });

But this returns

[object Object]Test Control 1
[object Object]Test Control 2

instead of

<input type="radio" name="rdBtngrp" id="rdBtn" />Test Control 1
<input type="radio" name="rdBtngrp" id="rdBtn" />Test Control 2

?? What am I missing ??

Answer 1

$('<input />').attr({ id: 'rdBtn', type: 'radio', name: 'rdBtngrp' }) is an object change it to:

if (isSelected == 1) {
    $newRdBtn = '<input id="rdBtn" type="radio" name="rdBtngrp" selected="true" />' +'<label for="rdBtn">' + radioButtonText + '</label>';
} else {
    $newRdBtn = '<input id="rdBtn" type="radio" name="rdBtngrp" />' + '<label for="rdBtn">' + radioButtonText + '</label>';
}