0

因此，我试图将无线电表单元素从一个地方克隆到另一个地方以进行显示，但也需要更新原始位置的设置。所以我使用 jQuery 克隆并将 on change 事件绑定到克隆元素，这样当克隆的版本值发生变化时，它会更新原始位置。但是，我似乎对有时无法单击的单选按钮有问题。此外，我不确定原始单选值是否已更改，因为查看 dom 并没有告诉我任何信息。

这是我的代码：http: //jsfiddle.net/KNnmp/

JS：

    $( '.edit' ).click( function() {
    var values = $( '.original-location .values' ),
        clonedValues = values.clone( true, true );

    $( '.value', clonedValues ).each( function ( index ) {
        $( this ).on( 'change', function() {
            values.find( '.value' ).eq( index ).click();
        } );
    } );

    // append to location and show settings
    $( '.edit-location .settings' ).append( clonedValues ).hide().slideDown( 'fast' );
} );

HTML：

    <div class="original-location">
    <div class="values">
        <label>On <input type="radio" name="choose" value="on" class="value" /></label><label>Off <input type="radio" name="choose" value="off" /></label>
    </div><!--.values-->
</div><!--.original-location-->

<div class="edit-location">
    <div class="settings"></div><!--.settings-->
</div><!--.edit-location-->

<a href="#" class="edit">Edit</a>

感谢您的关注。

4

1 回答 1

0

这是您正在寻找的代码，您的代码中有以下问题

  1. 设置值的方式错误
  2. 使用方式change不对
  3. 添加新组时必须更改组名

一旦你修复了这些，你的代码将如下所示。

$('.edit').click(function () {
    var values = $('.original-location .values'); 
    var clonedValues = values.clone(true, true);

    // changing the name of the cloned radio buttons. so those will become a new group.
    clonedValues.find('input[type=radio]').each(function (index) {
        var name = $(this).prop('name');
        // appending length to the name, so it will become unique name for this group
        $(this).prop('name', name + $('.values').length);
    });

    // append to location and show settings
    $('.edit-location .settings').append(clonedValues).hide().slideDown('fast');
});

// apling change event globally
$('.original-location .values').on('change', 'input[type=radio]', function () {
    // set the original values based on cloned selection
    $("input[name='choose'][value=" + $(this).val() + "]").prop('checked', true);
});

http://jsfiddle.net/KNnmp/1/

于 2013-06-16T18:58:37.067 回答