[英]Radio button function not working properly when rows dynamically added by javascript
I am fetching values from database via json, and in parallel I am adding radio buttons with 3 options. 我正在通过json从数据库中获取值,并且同时添加了带有3个选项的单选按钮。 However, when trying to make a selection I face below issue.
但是,当尝试进行选择时,我面临以下问题。
If you run the code and try to select Green for all 3 options, the option keeps jumping from 1 row to another. 如果您运行代码并尝试为所有3个选项选择“绿色”,则该选项会不断从第一行跳到另一行。 If you want to select Green for all 3, its not letting it.
如果要为所有3个选择绿色,则不要选择绿色。
My aim is to update the database back with either of 3 options and store the value in json object as status. 我的目标是使用3个选项之一更新数据库,并将值存储在json对象中作为状态。
My purpose is to make selection out of 3 options and pass it back to database and update. 我的目的是从3个选项中进行选择,然后将其传递回数据库并进行更新。 Please help!
请帮忙!
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>
You've just to give them the same name like the following snippet shows. 您只需要给它们起相同的名字即可,如下面的代码片段所示。
Then if you want to get the new values, you could loop through the tr's : 然后,如果要获取新值,可以遍历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()});
});
Hope this helps. 希望这可以帮助。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.