从 json 数据动态生成单选按钮答案

【问题标题】：Dynamically generated Radio button from json data从 json 数据动态生成单选按钮
【发布时间】：2013-11-01 02:30:05
【问题描述】：

我正在开发一个应用程序，用于为从 json 数据生成的值选择 PASS/FAIL 选项。

我的问题是我无法为每行选择值。所选值适用于所有行。

HTML：

<table id="records" cellspacing="0">

查询：

(function () {
    var url = "http://www.filltext.com/?callback=?";
    $.getJSON(url, {
        'rows': 5,
            'fname': '{firstName}',
            'lname': '{lastName}',
            'tel': '{phone|format}',
    })
        .done(function (data) {
        $.ajaxSetup({
            cache: false
        });
        var t;
        $.each(data, function (i, item) {
            var html =
                "<td>" + item.fname + "</td>" +
                "<td>" + item.lname + "</td>" +
                "<td>" + item.tel + "</td>" +
                "<td><input type='text' name='PASS' placeholder='" + i + "' /></td>" +
                "<td><input type='radio' value='Pass' name='PASS'/>PASS</td>" +
                "<td><input type='radio' value='Fail' name='PASS'/>FAIL</td>";
            $("<tr/> </table>").html(html).appendTo("#records");

        });
        $('input[name="PASS"]').on('change', function () {

            $('input[type="text"]').val($(this).val());

        });
    });
})();

JSFIDDLE：http://jsfiddle.net/rutvij111/hUAWF/

【问题讨论】：

标签： html json jquery web

【解决方案1】：

working fiddle

首先，您只需为每行要关联（通过和失败）的两个单选按钮添加相同的名称

类似这样的：

"<td><input type='radio' value='Pass' name='PASS" + i + "'/>PASS</td>"+
"<td><input type='radio' value='Fail' name='PASS" + i + "'/>FAIL</td>";

然后使用类型而不是名称将更改处理程序分配给单选按钮

$('input[type="radio"]').on('change', function() { });

然后到达父 tr 并从那里查找 input[type=text]

$(this).parent().parent().find('input[type=text]').val($(this).val());

【讨论】：

【解决方案2】：

这是因为您为每个单选按钮分配了相同的 name="PASS"。你应该为每一行选择一个不同的。您可以将其编号为name = "PASS1" 左右。推荐方法演示：

http://jsfiddle.net/hUAWF/7/

或者，如果仅用于显示数据（而不是写入），则只能通过选择该行的子行来更新单行：

$('input[name="PASS"]').
  on('change', function() {
    $(this).
      parents("tr").
      find('input[type="text"]').
      val($(this).val());

简单替代的演示：

http://jsfiddle.net/hUAWF/4/

【讨论】：

【解决方案3】：

这不是最佳解决方案，但它正在工作

    (function() {
    var url = "http://www.filltext.com/?callback=?";
    $.getJSON( url, {
        'rows': 5,
'fname': '{firstName}',
'lname': '{lastName}',
'tel': '{phone|format}',
      })
      .done(function( data ) {
           $.ajaxSetup ({ cache: false});
               var t;
        $.each( data, function( i, item ) {
    var html = 
        "<td>" + item.fname + "</td>" +
        "<td>" + item.lname + "</td>" +
        "<td>" + item.tel + "</td>" +
        "<td><input id="+i+" type='text' name='PASS' placeholder='"+i+"' /></td>" +
        "<td><input id="+i+" type='radio' value='Pass' name='PASS'/>PASS</td>"+
        "<td><input id="+i+" type='radio' value='Fail' name='PASS'/>FAIL</td>";
      $("<tr/> </table>").html(html).appendTo("#records");

});
  $('input[name="PASS"]').on('change', function() {

      var id=  $(this).attr('id');
        $('input[type="text"]#'+id).val($(this).val());

    });
      });
    })();

【讨论】：

【解决方案4】：

工作DEMO

试试这个，

问题是因为您指定了$('input[type="text"]')它会选择所有文本类型的输入，所以所有文本框的值都会受到影响，但是下面的代码会在单击的单选按钮的同一行中获取相应的文本框。

$('input[name="PASS"]').on('change', function() {

    $(this).parents('tr').find('input[type="text"]').val($(this).val());

});

希望对你有帮助，谢谢

【讨论】：