라디오 버튼 추가 정렬 가능한 목록에 그룹

Question

2 개의 정렬 가능 목록이 있습니다. 콘텐츠를 다른 목록으로 드래그하면 라디오 항목을 목록 항목에 추가하려고합니다.

샘플 목록 (정렬 2에서 이동 될 때까지 sortable1 더 목록 항목이 없습니다)

<ul id="sortable1" class="connectedSortable"> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight">Item 1</li> 
    <li class="ui-state-highlight">Item 2</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
    </ul> 

나는 목록에 라디오 그룹을 추가 할 sortable1하는 sortable2에서 목록 항목을 이동합니다. 1을 정렬 할 수있는 3 개 라디오 버튼을 추가

JQuery와 :

$("tbody.connectedSortable").sortable({ 
receive: function(event, ui) // add radio boxes on drop 
{ 

       ui.item.append("<input type='radio' name='test' value='test1'><input type='radio' name='test' value='test2'><input type='radio' name='test' value='test3'>"); 
       //console.log (""); 

}, 

질문 : 어떻게 동적으로 라디오 그룹에 고유 한 이름을 추가하는 방법은 무엇입니까? 위의 코드는 라디오 버튼을 추가하지만 모든 라디오 버튼은 동일한 그룹입니다.

Answer 1

변수 글로벌과 같이 작성합니다

var countGroup = 0; 

및 APPEND에

는 다음을 수행

function getSelectedRadioButtons(){ 
     for(var i = 0; i <= countGroup; i++){ 
     console.log($("input[name=group" + i + "]:checked").val()); 
     } 

}

:

$("tbody.connectedSortable").sortable({ 
receive: function(event, ui) // add radio boxes on drop 
{ 

       ui.item.append("<input type='radio' name='group"+ countGroup +"' value='test1'><input type='radio' name='group"+ countGroup +"' value='test2'><input type='radio' name='group"+ countGroup +"' value='test3'>"); 
       countGroup = countGroup +1; 
       //console.log (""); 

}, 

당신이 얻으려면 값은 이렇게