jquery 获取表单中所有单选框/复选框的 html 代码

Question

我正在尝试解析表单的一些元素。

我有表单 ID/表单名称。

现在我想解析所有名称为“radio123”（或 id="radio123"）的单选按钮。 但是当我在每个元素（单选按钮）上尝试 $(this).html 时......然后我得到一个空白值......

如何访问表单中所有单选按钮/复选框的 HTML 代码？

Answer 1

这是jQuery.fn.html 函数的正常行为：This method uses the browser's innerHTML property. 如果您不明白我的意思，请查看示例。

我不知道你为什么要获取HTML（如果你想要值，请查看jQuery.fn.val方法），但这里有一个解决方案

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

注意outerHTML，因为并非所有浏览器都支持它，你可以使用这个函数：

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

Answer 2

这样的东西应该可以工作 -

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());
})

演示 - http://jsfiddle.net/tJ2Zc/

代码使用此方法$(this).clone().wrap('<div>').parent().html() 来获取DOM 元素的外部HTML。更多信息可以在问题中找到 - Get selected element's outer HTML

上面的代码将所有单选按钮 html 写入一个数组，但您可以更改它以在循环中执行您希望的操作。