使用 jquery 复制 div 的内容时未检查无线电对象答案

【问题标题】：radio object not checked when copy the contents of div with jquery使用 jquery 复制 div 的内容时未检查无线电对象
【发布时间】：2013-08-21 08:10:42
【问题描述】：

我在使用 jquery 时遇到问题 input[type=radio]。

我需要复制 div 的内容，但保持默认选中单选对象

$('#copy').click(function() {
    var copy = '<div id="source">';
    copy += $('#source').html();
    copy += '</div>';
    $(this).after(copy);
});

http://jsfiddle.net/R7EFb/

请帮帮我！

【问题讨论】：

您的复制是在克隆 ID，这是一个禁忌。此外，您实际上是在扩展您的单选按钮组，这可能不是您想要的。
@j08691 不仅是 ID，还有名称属性。
所以在你的小提琴中......你错了，因为一次只能检查一台收音机。意味着您违反了 html ..这就是为什么不维护无线电的状态
名称也不能相同
我有点困惑，在 #source 首先，当我点击 #copy 时，将取消选中无线电对象 jsfiddle.net/R7EFb/1

标签： jquery radio

【解决方案1】：

您需要在不复制 ID、名称和属性（如果有）的情况下进行克隆。请检查工作小提琴here。

请看 globalVarCount 是区分这些的变量。这是代码::

var globalVarCount= 0;
$('#copy').click(function() {
    var copy;
    $clone = $("#source").clone();
    $clone.attr("id",$clone.attr("id")+1)
    $clone.children().each(function(){
        $(this).attr("id",$(this).attr("id")+1);
        $(this).attr("name",$(this).attr("name")+1);
        $(this).attr("for",$(this).attr("for")+1);
    });
    $(this).after($clone);
});

【讨论】：

【解决方案2】：

您必须为复制的单选按钮集和标签使用不同的名称属性和 ID。

这是JSFiddle example。

var copyCount = 1;

$("#copy").click(function() {
    $("#source").clone().attr("id", "source" + copyCount).appendTo("body");
    // Get original radio elements
    $radio1 = $("#source" + copyCount + " #radio1");
    $radio2 = $("#source" + copyCount + " #radio2");
    $radio3 = $("#source" + copyCount + " #radio3");
    $radio4 = $("#source" + copyCount + " #radio4");

    // Change attributes (name and id)
    $radio1.attr("id", "radio" + (copyCount * 4 + 1)).attr("name", "check" + (copyCount * 2 + 1)).next().attr("for", "radio" + (copyCount * 4 + 1));
    $radio2.attr("id", "radio" + (copyCount * 4 + 2)).attr("name", "check" + (copyCount * 2 + 1)).next().attr("for", "radio" + (copyCount * 4 + 2));
    $radio3.attr("id", "radio" + (copyCount * 4 + 3)).attr("name", "check" + (copyCount * 2 + 2)).next().attr("for", "radio" + (copyCount * 4 + 3));
    $radio4.attr("id", "radio" + (copyCount * 4 + 4)).attr("name", "check" + (copyCount * 2 + 2)).next().attr("for", "radio" + (copyCount * 4 + 4));

    // Restore selected option in original radio set
    if ($radio1.attr("checked") !== undefined) $("#source #radio1").click();
    if ($radio2.attr("checked") !== undefined) $("#source #radio2").click();
    if ($radio3.attr("checked") !== undefined) $("#source #radio3").click();
    if ($radio4.attr("checked") !== undefined) $("#source #radio4").click();

    copyCount++;
});

【讨论】：