div를 동적으로 추가하지만 입력 유형 라디오와 관련된 문제가 발생했습니다.

Question

클릭 할 때 div를 복제 할 때 <a>을 사용하고 있습니다. Div에는 같은 이름의 두 개의 라디오 버튼이 있습니다.

이제 문제는 하나의 라디오 옵션을 선택하고 div를 복제 할 때 다음 두 라디오 버튼이 같은 이름으로오고 마지막 div의 라디오 버튼이 선택되지 않은 상태입니다.

$('.addMore').on('click', function() { 
 
    $('.addMoreDiv:last').clone().insertAfter('.addMoreDiv:last'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="addMoreDiv"> 
 
    <label> 
 
    <input type="radio" name="optradio">Radio 1 
 
    </label> 
 
    <label> 
 
    <input type="radio" name="optradio">Radio 2 
 
    </label> 
 
</div> 
 

 
<a href="#" class="addMore">Add More</a>

나는 길이에 따라 이름을 업데이트 시도했지만 작동 및 이름 업데이트 사업부의 첨가 한 후하지 않았다.

아무 옵션이 있어도 새 div를 추가 할 때 다른 이름이 붙어 있으므로 마지막 div를 선택해도 효과가 없습니다.

Answer 1

@sailens에서 제안한대로; 라디오 그룹의 name을 변경하여 완전히 새로운 라디오 버튼 세트로 간주해야합니다. 우리는 다음과 같은 방법으로 그것을 달성 할 수

var count = 0; 
 
$('.addMore').on('click', function() { 
 
    var clonedDiv = $('.addMoreDiv:last').clone(); 
 
    clonedDiv.find("input[type=radio]").each(function(){ 
 
    $(this).attr("name","optradio_"+count); 
 
    }); 
 
    count++; 
 
    clonedDiv.insertAfter('.addMoreDiv:last'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="addMoreDiv"> 
 
    <label> 
 
    <input type="radio" name="optradio">Radio 1 
 
    </label> 
 
    <label> 
 
    <input type="radio" name="optradio">Radio 2 
 
    </label> 
 
</div> 
 

 
<a href="#" class="addMore">Add More</a>

Answer 2

$('.addMore').on('click', function() { 
 
    $('.addMoreDiv:last').clone().insertAfter('.addMoreDiv:last'); 
 
    $('.addMoreDiv').each(function(i, v) { 
 
    $(this).find('input').attr('name', 'optradio' + i) 
 

 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="addMoreDiv"> 
 
    <label> 
 
    <input type="radio" name="optradio">Radio 1 
 
    </label> 
 
    <label> 
 
    <input type="radio" name="optradio">Radio 2 
 
    </label> 
 
</div> 
 

 
<a href="#" class="addMore">Add More</a>

복제 후와 attr name이 라디오 버튼이 아래를 찾아 각 사업부에 서로

Answer 3

을 분리 할 모든 사업부를 통해 이동하고 입력를 찾아 변경 삽입 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="addMoreDiv"> 
    <label> 
    <input type="radio" name="optradio">Radio 1 
    </label> 
    <label> 
    <input type="radio" name="optradio">Radio 2 
    </label> 
</div> 

<a href="#" class="addMore">Add More</a> 

스크립트는 다른 라디오 이름으로 새로운 사업부를 만들려면 다음

$('.addMore').on('click', function() { 
    // total number of div's, to create unique name for `radio` 
    var n = $('.addMoreDiv').length; 
    var lastdiv = $('.addMoreDiv:last'); 
    var newdiv = lastdiv.clone(); 

    // changing the name for `radio` 
    newdiv.find('input[type="radio"]').prop('name', 'optradio'+n); 

    // adding after changing names. 
    newdiv.insertAfter(lastdiv); 

}); 

Answer 4

이 시도 :

var clone = ''; 

    var count = 0; 
    $('.addMore').on('click', function() { 

    clone += '<div class="addMoreDiv">'; 
     clone += '<label>'; 
     clone += '<input type="radio" name="optradio'+count+'">Radio 1'; 
     clone += '</label>'; 
     clone += '<label>'; 
     clone += '<input type="radio" name="optradio'+count+'">Radio 2'; 
     clone += '</label>'; 
    clone += '</div>'; 

    $('.addMoreDiv').after(clone); 

    count++; 
    }); 

여전히 직면하고 문제. 아래에 의견을주십시오.