0

我在克隆具有默认选中状态的单选按钮时遇到困难。

这是我的 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/

4

3 回答 3

2

试试这个：

$(".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');
});

演示

于 2013-03-04T11:12:48.453 回答
1

尝试

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" />
于 2013-03-04T10:59:29.203 回答
0

试试这个

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

在这里摆弄

于 2013-03-04T11:12:11.263 回答