使复选框的行为类似于可复制输入字段中的单选按钮 [英] Make checkboxes act like radio buttons in duplicatable input fields

问题描述

我正在创建一个可复制的div包含复选框，目前在原始输入集上，复选框就像单选按钮一样，但是当复制时它仍然只能在第一个而不是第二个工作。

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.

非常感谢任何帮助。

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>

提前致谢：）

推荐答案

它不起作用的原因是您没有将click事件附加到新的克隆元素。

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

这篇关于使复选框的行为类似于可复制输入字段中的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！