jQuery – 重命名复选框连续设置

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

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

在页面加载：

一个新的克隆

我正在尝试用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(); }); }); 

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

这是我正在努力的最后一点……任何想法都会非常感激！

非常感谢…

Answer 1

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

小提琴

Answer 2

我创建了一个小提琴，这是一个更简单的实现：

HTML：

 
 Email SMS 
 Clone! 

使用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/