In the below script, I am dynamically creating radio-buttons (green/yellow/red) as status next to some categories.
Categories and status (1-green, 2-yellow, 3-red) will both be received via json objects. My aim is to display current status as pre-selected radio button.
eg: In the below form say {"category":"System Availability","status":"1"}
indicates that System Availability status is 1 that means Green, how can I select Green button pre-selected? If it comes as 0, nothing should be selected.
Here is the running-code that doesn't have any functionality of pre-selecting radio button based on json input. At the end, my aim is to update the database back via json.
Thanks for your time, in attempting to help!
$(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  </font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="2"><font color="yellow">Yellow  </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>
答案 0 :(得分: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  </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  </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>