Question

我正在尝试构建一个表单，允许输入多个元素（未知数字），然后使用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();


            });
        });

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

上的所有分组重新编号

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

非常感谢...

Answer 1

var j = 0;

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

FIDDLE

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

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

2 个答案: