javascript - 如何通过 javascript 根据 json 输入预先选择动态创建的单选按钮

Question

在下面的脚本中，我动态创建单选按钮(绿色/黄色/红色)作为某些类别旁边的状态。

类别和状态(1-绿色、2-黄色、3-红色)都将通过 json 对象接收。我的目标是将当前状态显示为预选的单选按钮。例如:在下面的表格中说 {"category":"System Availability","status":"1"} 表示系统可用性状态为 1，表示绿色，我如何选择绿色按钮-选择了？如果为 0，则不应选择任何内容。

这是运行代码，没有任何基于 json 输入预选单选按钮的功能。最后，我的目标是通过 json 更新数据库。

感谢您花时间尝试提供帮助!

					$(document).ready(function() {
					    var appStatus = [{
					        "category": "Overall Status",
					        "status": "0"
					    }, {
					        "category": "System Availability",
					        "status": "1"
					    }, {
					        "category": "Whatever",
					        "status": "2"
					    }];
					    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" id="inlineRadio1"><font color="green">Green &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="2"><font color="yellow">Yellow &emsp;</font></label><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio3" value="3"> <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>

Answer 1

我可能过于简化了这一点，但如果您想预先选择一个单选按钮，只需更改您要附加的 HTML，以便 <input>呈现为 checked何时应选择属性:

$(document).ready(function() {
	var appStatus = [{
		"category": "Overall Status",
		"status": "0"
	}, {
		"category": "System Availability",
		"status": "1"
	}, {
		"category": "Whatever",
		"status": "2"
	}];
	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" id="inlineRadio1"' + 
			(appStatus[i].status == '1' ? ' checked="checked"' : '') + 
			'><font color="green">Green &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="2"' + 
			(appStatus[i].status == '2' ? ' checked="checked"' : '') + 
			'><font color="yellow">Yellow &emsp;</font></label><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio3" value="3"' + 
			(appStatus[i].status == '3' ? ' checked="checked"' : '') + '> <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>