[英]Radio button function not working properly when rows dynamically added by javascript
我正在通過json從數據庫中獲取值,並且同時添加了帶有3個選項的單選按鈕。 但是,當嘗試進行選擇時,我面臨以下問題。
如果您運行代碼並嘗試為所有3個選項選擇“綠色”,則該選項會不斷從第一行跳到另一行。 如果要為所有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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.