2013-01-16 90 views
0

嗨,這實際上是在另一個問題(HERE),它有兩個部分。第一部分是通過@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> 

回答

1

看到這個更新小提琴:http://jsfiddle.net/EEd7c/7/

評論這條線:$clonedDiv.find('input').val('');

同樣在submit按鈕點擊設置dep_counter = 0; ..

+0

嘿,不知道這是否合適,但你的答案通常是平靜的輝煌,你可以檢查一下:http://stackoverflow.com/questions/14374324/jquery-clone-able-inputs-foreach-overwrites-值/ –

1

你克隆複選框沒有分配給它的任何值。確保當它的克隆值設置在網絡複選框中時

+0

此註釋「//你並不需要環通輸入設定值「是您問題的根源。其實是的,你是。你在這裏設置爲空$ clonedDiv.find('input')。val(''); – WebweaverD

1

這只是因爲這些複選框具有相同的name屬性。當按下提交按鈕時,它會序列化所有表單控件(文本框,單選框,複選框等)的值併發送它們。名稱屬性應該對所有這些控件都是唯一的。

在您的代碼中,所有這些複選框具有相同的name屬性(關係),這使得它們不可區分。解決這個問題的方法是爲這些複選框指定不同的名稱。