0

嗨，这实际上是另一个问题（这里），它有两个部分。第一部分由@epascarello 解决 - 再次感谢，现在只剩下这一部分，我似乎不明白。

我正在创建一个包含复选框的可复制 div，提交时它只返回控制台中原始输入的一个值，但没有任何重复值。

非常感谢任何帮助。

JS 小提琴：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>
4

3 回答 3

1

您克隆的复选框没有分配任何值。确保在克隆时将值设置在网络复选框中

于 2013-01-16T14:16:18.937 回答
1

这仅仅是因为这些复选框具有相同的name属性。当按下提交按钮时，它会序列化所有表单控件（文本框、单选框、复选框等）的值并发送它们。所有这些控件的 name 属性应该是唯一的。

在您的代码中，所有这些复选框都具有相同的name属性（关系），这使得它们无法区分。解决此问题的方法是为这些复选框赋予不同的名称。

于 2013-01-16T14:20:34.547 回答
1

看到这个更新的小提琴：http: //jsfiddle.net/EEd7c/7/

评论这一行：$clonedDiv.find('input').val('');

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

于 2013-01-16T14:22:19.743 回答