jQuery单击时克隆无线表单元素问题

因此，我试图将一个radio表单元素从一个位置克隆到另一个位置以进行显示，但需要同时更新原始位置中的设置。因此，我使用jQuery clone并将一个on change事件绑定到clone元素，以便在克隆版本值更改时更新原始位置。然而，我似乎有一个问题，单选按钮有时不点击。此外，我不确定原始的无线电值是否已经改变，因为查看dom并没有告诉我任何事情

这是我的密码：

JS:

HTML:

断断续续

---

感谢您的查找。

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

设置值的方法是错误的

使用

change

的方法是错误的

添加新组时，必须更改组名

一旦您修复了这些问题，您的代码将如下所示

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

---

您好，谢谢您的输入，但这对我不起作用，因为我的输入名称是动态的。此外，还将有多个单选按钮，这些按钮对许多不同的单选输入具有开/关值。只是名字不同。因此，我的输入名称看起来非常复杂，例如：在上面的代码中，您只需要知道

原始位置

无线电组的名称。其他是由上述代码自动设置的。请问您是否知道我的代码为何以奇怪的方式呈现单选按钮？在您的代码中，是这样的：clonedValues.find（'input[type=radio'））.each（function（index）{var name=$（this）.prop（'name'）；$（this）.prop（'name'，name+$（'values'）.length）；}）；那有什么用？因为我可以把它评论出来，它仍然可以工作。

    <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>

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