자바에서 행을 동적으로 추가 할 때 라디오 버튼 기능이 제대로 작동하지 않습니다.

Question

json을 통해 데이터베이스에서 값을 가져 오는 중이고 병렬로 3 가지 옵션이있는 라디오 버튼이 추가됩니다. 그러나, 선택을 할 때 나는 아래의 문제에 직면한다.

코드를 실행하고 3 가지 옵션 모두에 대해 녹색을 선택하면 옵션이 1 행에서 다른 행으로 점프합니다. 모두 3에 대해 녹색을 선택하고 싶다면, 그것을 끄지 마십시오.

내 목표는 데이터베이스를 세 가지 옵션 중 하나로 업데이트하고 json 개체의 값을 상태로 저장하는 것입니다.

내 목적은 세 가지 옵션 중에서 선택하여 데이터베이스에 전달하고 업데이트하는 것입니다. 도와주세요!

type = "text/javascript" > 
 
    $(document).ready(function() { 
 
     var appStatus = [{ 
 
      "category": "Overall Status", 
 
      "status": "0" 
 
     }, { 
 
      "category": "System Availability", 
 
      "status": "0" 
 
     }, { 
 
      "category": "Whatever 2", 
 
      "status": "0" 
 
     }]; 
 
     var tr; 
 
     for (var i = 0; i < appStatus.length; i++) { 
 
      tr = $('<tr/>'); 
 
      tr.append("<td>" + appStatus[i].category + "</td>"); 
 
      tr.append('<tr id="row' + i + '"><td><input type="radio" name="inlineRadioOptions []" value="1" checked="checked" id="inlineRadio1"><font color="green">Green &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions1 []" id="inlineRadio2" value="YELLOW"><font color="yellow">Yellow &emsp;</font></label><label class="radio-inline"><input type="radio" name="inlineRadioOptions1 []" id="inlineRadio3" value="Red"> <font color="red">Red</font></label><td></tr>'); 
 
      $('table').append(tr); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover"><thead> 
 
<th>Category</th> 
 
<th>Status</th> 
 
</thead> 
 
</table>

Answer 1

당신은 다음 코드 쇼처럼 그들에게 같은 이름을 그냥했습니다. 이 도움이

var new_status = []; 
$('.table tbody tr').each(function(){ 
    new_status.push({category: $(this).find('td:eq(0)').text(),status: $(this).find(':radio:checked').val()}); 
}); 

희망 :

그런 다음 당신은 그럴 년대를 통해 당신은 할 수 루프, 새 값을 얻으려면.

type = "text/javascript" > 
 
    $(document).ready(function() { 
 
    var appStatus = [{ 
 
     "category": "Overall Status", 
 
     "status": "0" 
 
    }, { 
 
     "category": "System Availability", 
 
     "status": "0" 
 
    }, { 
 
     "category": "Whatever 2", 
 
     "status": "0" 
 
    }]; 
 
    var tr; 
 
    for (var i = 0; i < appStatus.length; i++) { 
 
     tr = $('<tr/>'); 
 
     tr.append("<td>" + appStatus[i].category + "</td>"); 
 
     tr.append('<tr id="row' + i + '"><td><input type="radio" name="inlineRadioOptions_' + i + '[]" value="1" checked="checked" id="inlineRadio1"><font color="green">Green &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="YELLOW"><font color="yellow">Yellow &emsp;</font></label><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio3" value="Red"> <font color="red">Red</font></label><td></tr>'); 
 
     $('table').append(tr); 
 
    } 
 
    
 
    
 
    $('#result').on('click',function(){ 
 
     var new_status = []; 
 
     $('.table tbody tr').each(function(){ 
 
      new_status.push({category: $(this).find('td:eq(0)').text(),status: $(this).find(':radio:checked').val()}); 
 
     }); 
 
     
 
     console.log(new_status); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover"> 
 
    <thead> 
 
    <th>Category</th> 
 
    <th>Status</th> 
 
    </thead> 
 
</table> 
 

 
<button id="result">Result</button>