我正在通过 json 从数据库中获取值,并同时添加带有 3 个选项的单选按钮。但是,在尝试进行选择时,我面临以下问题。
如果您运行代码并尝试为所有 3 个选项选择绿色,则该选项会不断从 1 行跳到另一行。如果您想为所有 3 个选择绿色,它不会允许它。
我的目标是使用 3 个选项中的任何一个更新数据库,并将 json 对象中的值作为状态存储。
我的目的是从 3 个选项中进行选择,并将其传递回数据库并进行更新。请帮忙!
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  </font><label class="radio-inline"><input type="radio" name="inlineRadioOptions1 []" id="inlineRadio2" value="YELLOW"><font color="yellow">Yellow  </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>
您只需
为它们指定相同的名称,如以下代码片段所示。
然后,如果你想得到新值,你可以遍历tr的:
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  </font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="YELLOW"><font color="yellow">Yellow  </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>