1

チェックボックスを含む複製可能なdivを作成しています。現時点では、元の入力セットでは、チェックボックスはラジオボタンのように機能しますが、複製すると、最初のdivでは機能します。2番目の入力では機能しません。

また、送信時に、コンソールの元のフォームの値を1つだけ返しますが、重複する値は返しません。

どんな助けでも大歓迎です。

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

および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

2

これを参照してください：http：//jsfiddle.net/EEd7c/1/

var $unique = $('input[type="checkbox"]');
$unique.live("click", function() {
$(this).siblings().removeAttr('checked');
$(this).attr('checked', true);
});

しかし、Liveは非推奨です...

または

$(document).on("click", 'input[type="checkbox"]', function() {
$(this).siblings().removeAttr('checked');
$(this).attr('checked', true);
});
于 2013-01-16T13:43:38.480 に答える
0

それが機能しない理由は、クリックイベントを新しい複製された要素にアタッチしていないためです。

$(document).on("click", 'input[type="checkbox"]', function() {
    jQuery(this).siblings(":checked").removeAttr('checked');
});
于 2013-01-16T13:36:54.460 に答える
0 
var $unique = $('input[type="checkbox"]');
$unique.live('click',function() {
    $(this).closest('div').find('input[type="checkbox"]').removeAttr('checked');
    $(this).attr('checked', true);
});

live動的に作成された要素にイベントハンドラーを登録するために使用します。$ unique変数には、チェックボックスの初期セットのみが含まれます。

于 2013-01-16T13:40:01.337 に答える