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

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" />

end当添加另一行时，它将转到：

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

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

有没有办法让我这么做？

Answer 1

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

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