可重复的复选框仅返回原始值，而不重复

问题描述

您好，这实际上是另一个问题(这里)有两个部分.第一部分由@epascarello解决-再次感谢，现在只剩下这一部分了，我似乎没明白.

Hi this was actually orginally in another question (HERE) that had two parts. The first part was solved by @epascarello - thanks again, now just this part remaining, and i don't seem to get it.

我正在创建一个包含复选框的可重复使用的div，在提交时，它仅会为控制台中的原始输入返回一个值，而对任何重复项都没有返回值.

I'm creating a duplicate-able div's containing checkboxes, on submit it only returns one value for the original input in the console, but no value for any duplicates.

任何帮助都将不胜感激.

Any help greatly appreciated.

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

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
$(document).on("click", 'input[type="checkbox"]', function() {
    jQuery(this).siblings(":checked").removeAttr('checked');
});

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

和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>

推荐答案

请参阅以下更新的小提琴: http://jsfiddle.net/EEd7c/7/

See this updated fiddle : http://jsfiddle.net/EEd7c/7/

注释此行:$clonedDiv.find('input').val('');

还可以在submit按钮单击上设置dep_counter = 0;.

Also set dep_counter = 0; on submit button click..

这篇关于可重复的复选框仅返回原始值，而不重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！