具有克隆行的单选按钮数组

Question

我有一个表单，如果用户单击“添加行”，则该行会变成小丑。我的问题是单选按钮，单选组的名称保持不变，我需要让它们对每个克隆的行都是唯一的。这就是我现在的样子。

 <input type="radio" name="chronic_l_duration[]" value="Chronic" />
 <input type="radio" name="chronic_l_duration[]" value="Limited duration" />

我想要的是这样的：

<input type="radio" name="chronic_l_duration[1]" value="Chronic" />
<input type="radio" name="chronic_l_duration[1]" value="Limited duration" />

添加另一行时结束：

 <input type="radio" name="chronic_l_duration[2]" value="Chronic" />
 <input type="radio" name="chronic_l_duration[2]" value="Limited duration" />

我用来克隆一行的Javascript：

  $(document).ready(function(){
    var clonedRow = $('.row').clone().html();
    var appendRow = '<tr class = "row">' + clonedRow + '</tr>';  

    $('#btnAddMore').click(function(){

    $('.employmentHistoryForm tr:last').after(appendRow);
    });


    $('.deleteThisRow').live('click',function(){
    var rowLength = $('.row').length;

    if(rowLength > 1){
    deleteRow(this);
    }else{
    $('.employmentHistoryForm tr:last').after(appendRow);
    deleteRow(this);
    }
    });

    function deleteRow(currentNode){
    $(currentNode).parent().parent().remove();
    }
    });

因此，每次克隆行获取时，单选按钮都有一个唯一值。

有没有办法可以做到这一点？

Answer 1

您可以使用$('.employmentHistoryForm tr:last') 访问附加的行，然后修改输入名称：

$('#btnAddMore').click(function(){
   $('.employmentHistoryForm tr:last').after(appendRow);
   $('.employmentHistoryForm tr:last input[type="radio"]').attr('name', 'desired value');
});