Question

我无法克隆带有默认状态的单选按钮。

这是我的HTML：

<div class="container">
<div class="a2">
    <input type="radio" name="selection_1" value="name" checked="checked" /> Name
    <input type="radio" name="selection_1" value="url" /> URL
    <div class="text">
        <textarea name="name[]">Enter name: </textarea>
    </div>
    <div class="url">
        <textarea name="url[]">http://</textarea>
    </div>
  </div>
</div>
<input type="button" class="clone" value="Clone" />

这是我的jQuery：

$('.a2 [name]').change(function() { 
if($(this).val() == "name") {
    $(this).parent().find('.url').css({'visibility': 'hidden', 'display':'none'});
    $(this).parent().find('.text').css({'visibility': 'visible', 'display':'block'});
} else {
    $(this).parent().find('.text').css({'visibility': 'hidden', 'display':'none'});
    $(this).parent().find('.url').css({'visibility': 'visible', 'display':'block'});
}
});

$('.clone').click(function() {
    var p = $('.a2:first').length;
    var cloned = $('.a2:first').clone()
    .find('.a2 [name]').attr('name', 'selection_' + ++p).end()
    .appendTo('.container');
});

我想要实现的是克隆按钮应克隆整个单选按钮集，并且默认选中状态的文本区域也会克隆到新集中。应通过在每个副本上增加前缀编号（例如selection_2，selection_3等）来重命名单选按钮，以便每组上的无线电选择独立工作。

这是小提琴：http://jsfiddle.net/Tz66H/

Answer 1

试试这个：

$(".container").on("change", ".a2 input[name^='selection_']", function (event) {
    if ($(this).val() == "name") {
        $(this).parent().find('.url').css({
            'visibility': 'hidden',
                'display': 'none'
        });
        $(this).parent().find('.text').css({
            'visibility': 'visible',
                'display': 'block'
        });
    } else {
        $(this).parent().find('.text').css({
            'visibility': 'hidden',
                'display': 'none'
        });
        $(this).parent().find('.url').css({
            'visibility': 'visible',
                'display': 'block'
        });
    }
});

$('.clone').click(function () {
    var p = $('.a2').length;
    var cloned = $('.a2:first').clone()
        .find('input:radio').attr('name', 'selection_' + ++p).end()
        .appendTo('.container');
});

DEMO

Answer 2

尝试

var p = $('.a2 input[name=^="selection_"]').length + 1;
var cloned = $('.a2:first').clone()
.find('.a2 [name]').attr('name', 'selection_' + p).end()
.appendTo('.container');

经过测试的代码

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(function()
    {
        $('.a2 [name]').change(function()
        { 
            if($(this).val() == "name")
            {
                $(this).parent().find('.url').css({'visibility': 'hidden', 'display':'none'});
                $(this).parent().find('.text').css({'visibility': 'visible', 'display':'block'});
            }
            else
            {
                $(this).parent().find('.text').css({'visibility': 'hidden', 'display':'none'});
                $(this).parent().find('.url').css({'visibility': 'visible', 'display':'block'});
            }
        });

        $('.clone').click(function()
        {
            var p = $('.a2 input[name^="selection_"]').length + 1;
            alert(p);
            var cloned = $('.a2:first').clone().find('input[name^="selection_"]').attr('name', 'selection_' + p).end().appendTo('.container');
        });
    });

</script>
<div class="container">
    <div class="a2">
        <input type="radio" name="selection_1" value="name" checked="checked" /> Name
        <input type="radio" name="selection_1" value="url" /> URL
        <div class="text">
            <textarea name="name[]">Enter name: </textarea>
        </div>
        <div class="url">
            <textarea name="url[]">http://</textarea>
        </div>
    </div>
</div>
<input type="button" class="clone" value="Clone" />

Answer 3

试试这个

$('.clone').click(function() {
   var p = $('.a2 input[value="name"]').length + 1;
   $('.a2:first').clone().find('input[value="name"]').attr({name:'selection_' + p}).end().appendTo('.container');
});

fiddle here

如何克隆jQuery中具有默认检查状态的单选按钮？

3 个答案: