jQuery - 连续重命名复选框集答案

【问题标题】：jQuery - renaming checkboxes sets consecutivelyjQuery - 连续重命名复选框集
【发布时间】：2013-12-03 18:44:52
【问题描述】：

我正在尝试构建一个表单以允许输入多个元素（未知数字），然后使用 PHP 进行处理。表单需要分为两列，我的方法是在用户单击时克隆列顶部的表单。

除了处理复选框之外，这一切都很好！它们需要分成两组，并在每个新克隆时动态重新编号。期望的输出是这样的：

页面加载时：

<input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">

<input type="checkbox" name="UPDATE_METHOD[1][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[1][]" value="SMS" checked="">

在一个新的克隆上

<input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">

<!-- This will be the new group, cloned from the above group -->
<input type="checkbox" name="UPDATE_METHOD[1][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[1][]" value="SMS" checked="">

<!-- Further clones may appear here -->

<input type="checkbox" name="UPDATE_METHOD[2][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[2][]" value="SMS" checked="">

<!-- ...or here -->

我正在尝试使用 javascript/jQuery 来解决此问题。到目前为止我的代码（在@adeneo 的帮助下是：

$(document).ready(function(){
            $(".clone_trigger_button").click(function () {

                // code to group checkboxes below
                $('[name="UPDATE_METHOD[]"]').prop('name', function(i, name) {
                    return name.split('[').shift() + '['+(++i)+'][]';
                });


                $('.clone_replicate_this_div').first().clone().insertBefore(".placer");
                $('input.cl:last').val('');
                event.preventDefault();


            });
        });

这很好，只是它在克隆之前重命名了每个复选框。更改将是添加一个分组，然后在每次克隆点击时重新编号所有分组

这是我努力的最后一点……任何想法都将不胜感激！

非常感谢...

【问题讨论】：

可以制作小提琴吗？
jsfiddle.net/dalepotter/J88uS

标签： javascript jquery checkbox

【解决方案1】：

var j = 0;

$('[name="UPDATE_METHOD[]"]').prop('name', function(i, name) {
    if (i%2==0) j++;
    return name.split('[').shift() + '['+j+'][]';
});

FIDDLE

【讨论】：

非常感谢@adeneo。不过，在集成到我的代码中时，我无法引用让它工作。你能看看吗？ jsfiddle.net/dalepotter/J88uS/1 感觉我已经很接近完成这项工作了，但还没有完成！
@user2761030 - 当然，名称不再匹配选择器，这是一个固定的小提琴 -> jsfiddle.net/J88uS/3
谢谢！按计划工作 - 真的很棒:-)

【解决方案2】：

我创建了一个更简单的实现方法：

HTML：

<div class="group origin">
    <label><input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">Email</label>
    <label><input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">SMS</label>
</div>

<a href="#" class="cloner">Clone!</a>

Javascript：

var original= $(".origin");
var cloneNum = 0;
$(".cloner").on("click", function(e){
    e.preventDefault();

    cloneChecks();
});

function cloneChecks(){
    console.log("cloning..."); 
    cloneNum++;
    var clone = original.clone();
    clone.removeClass("origin");
    clone.find("input").each(function(){
        $(this).attr("name", "UPDATE_METHOD[" + cloneNum + "][]");
    });
    original.after(clone);
}

你当然可以调整这个来去掉分组div，但是原理很简单。

现场示例：http://jsfiddle.net/q3n7s/1/

【讨论】：