jquery get the html code for all radios/checkboxes within a form

Question

I am trying to parse some elements of a form.

I have with me the form ID/form name.

Now I want to parse through all radio buttons with name= "radio123"(or id="radio123"). But when I try $(this).html on each element (of a radio button)... then I get a blank value...

How do I access the HTML code for all radiobuttons/checkboxes within a form?

Already answered in http://stackoverflow.com/questions/8061026/javascript-jquery-parsing-through-all-elements-of-a-radio-check-box-how-to-get/8061075 , Please post your comments/doubts there and don't duplicate same question — Vikk, Nov 09 '11 at 07:48
@Vikk- Sorry I forgot that I had posted the question there...Will take care in future... — Arvind, Nov 09 '11 at 08:39

score 0 · Answer 1 · edited May 23 '17 at 12:11

Something like this should work -

var htmlarr = [];

$("input[type='radio'][name='radio123'],[type='radio'][id='radio123']").each(function () {
   //any logic you need here
   htmlarr.push($(this).clone().wrap('<div>').parent().html());
})

Demo - http://jsfiddle.net/tJ2Zc/

The code uses this method $(this).clone().wrap('<div>').parent().html() to get the outer HTML of a DOM element. More info can be found in the question - Get selected element's outer HTML

The code above writes all the radio button html into an array but you could change it to do what you wished within the loop.

score 0 · Accepted Answer · answered Nov 09 '11 at 08:33

This is the normal behavior for jQuery.fn.html function: This method uses the browser's innerHTML property. Look at the examples if you don't understand what I mean.

I don't know why you want to get the HTML (if you want the value, look at the jQuery.fn.val method), but here's a solution

$("input:radio").each(function () {
   console.log( this.outerHTML );
});

Be careful with the outerHTML, as it is not supported across all browsers you could use this function:

function getOuterHTML( node ) {
    var parent = node.parentNode,
        el = document.createElement( parent.tagName ),
        shtml;

    el.appendChild( node );
    shtml = el.innerHTML;
    parent.appendChild( node );

    return shtml;
}
// use it like getOuterHTML( this ) in the preceding each loop

jquery get the html code for all radios/checkboxes within a form

2 Answers2