Question

I’m creating a duplicate-able div’s containing check box’s, at the moment on the original set of inputs, the check boxes act like radio buttons, but when duplicated it still only works on the first not the second.

Also on submit it only returns one value for the original form in the console, but no value for any duplicates.

Any help greatly appreciated.

JS Fiddle: http://jsfiddle.net/dawidvdh/EEd7c/

jQuery:

//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependant = ["dependant"];
var group;
//Clone Tracking
//General Variables
var relation_input_groups = ["relation-group-1"];
//General Variables
//Generate variables
var relation_fields=[0];
var relation_input ="<label>Spouse</label>"+

    "<input type='checkbox' value='spouse' class='relationship' name='relationship' />" +
    "<label>own child</label>"+ 

    "<input type='checkbox' value='ownchild' class='relationship' name='relationship' />" +
    "<label>adopted</label>"+ 

    "<input type='checkbox' value='adopted' class='relationship' name='relationship' />" +
    "<label>stepchild</label>"+ 

    "<input type='checkbox' value='stepchild' class='relationship' name='relationship' />" +
    "<label>parent</label>"+ 

    "<input type='checkbox' value='parent' class='relationship' name='relationship' />" +
    "<label>inlaw</label>"+ 

    "<input type='checkbox' value='inlaw' class='relationship' name='relationship' />" +
    "<label>brother</label>"+ 

    "<input type='checkbox' value='brother' class='relationship' name='relationship' />" +
    "<label>other</label>"+ 

    "<input type='checkbox' value='other' class='relationship' name='relationship' />";
//Generate variables
jQuery(document).ready(function(e) 
{
    //populate jquery generated fields
    jQuery(relation_fields).each(function() 
    {
        jQuery(relation_input).appendTo('#relation-group-1');
    });
    //populate jquery generated fields
    //Cloning Function
    jQuery('#clone').click(function() 
    {
        clone_dependant();
    });
    function clone_dependant() 
    {
        // Store the value of the previous Id to insert the cloned div..
        var oldId = g_counter;
        g_counter++;
        currentdep ='dependant-'+g_counter;
        // Clone the Dependant Div and set a new id
        var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', 'dependant-'+g_counter);
        var relation_newDiv = 'relation-group-'+ g_counter;
        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#relation-group-1').attr('id',"relation-group-" + g_counter );
        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input').val('');
        $clonedDiv.find('input:checkbox').removeAttr('checked');
        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);

        relation_input_groups.push(relation_newDiv);
    }
    //Cloning Function
    //Validation
    //submit function
    var $unique = $('input[type="checkbox"]');
    $unique.click(function() 
    {
        $unique.removeAttr('checked');
        $(this).attr('checked', true);
    });

    var result = {};
    var dependants;
    var dep_counter = 0;
    jQuery('#submit').click(function()
    {
        jQuery('.dependant').each(function(k, v)
        {
            dep_counter++
            dependants = {};
            result['dependant'+dep_counter] = [dependants];
            dependants['relationship'] = $(v).find('.relationship:checked').val();
        });
        var jsonData = JSON.stringify(result);
        console.log(jsonData);
    });
});

and the HTML:

<div id="dependant-1" class="dependant">
    <div id="label">relationship:</div> <div id="relation-group-1"></div>
</div>

<button id="clone">clone</button>
<button id="submit">submit</button>

Thanks in advance 🙂

Answer 1

The reason why it does not work is you are not attaching the click events to the new cloned elements.

$(document).on("click", 'input[type="checkbox"]', function() {
    jQuery(this).siblings(":checked").removeAttr('checked');
});