Question

我通过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 &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions1 []" id="inlineRadio2" value="YELLOW"><font color="yellow">Yellow &emsp;</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>

Answer 1

您只需为他们提供与以下代码段相同的名称。

然后，如果你想获得新值，你可以遍历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()});
});

希望这会有所帮助。

＆＃13;

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 &emsp;</font><label class="radio-inline"><input type="radio" name="inlineRadioOptions_' + i + '[]" id="inlineRadio2" value="YELLOW"><font color="yellow">Yellow &emsp;</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);
    });
  });

＆＃13;

<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>

＆＃13;

当通过javascript动态添加行时，单选按钮功能无法正常工作

1 个答案: