Skip to content Skip to sidebar Skip to footer

JQuery - Renaming Checkboxes Sets Consecutively

I'm trying to build a form to allow multiple elements (unknown number) to be entered and then processed with PHP. The forms need to be grouped into two columns and my approach has

Solution 1:

var j = 0;

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

FIDDLE


Solution 2:

Ive created a fiddle which is a more simple implementation:

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);
}

You can tweak this of course to remove the grouping div, but the principle is very easy.

Live example: http://jsfiddle.net/q3n7s/1/


Post a Comment for "JQuery - Renaming Checkboxes Sets Consecutively"