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 に答える