基于 JSON 响应的单选按钮检查答案

【问题标题】：Radio buttons checking based on JSON response基于 JSON 响应的单选按钮检查
【发布时间】：2017-05-11 01:59:00
【问题描述】：

我正在尝试将一些值从 json 字符串加载到各种输入/字段。我的解决方案非常适合文本输入和文本字段，但我无法让它与单选按钮和复选框一起使用。你能帮我解决这个问题吗？

在 HTML 中，我有一些字段如下：

<textarea  rows="3" name="testfield"></textarea>
<input type="text" name="testinput">
<label><input class="radio" type="radio" name="testrad" value="one" checked><span>1</span></label>
<label><input class="radio" type="radio" name="testrad" value="two" ><span>2</span></label>
<label><input class="radio" type="radio" name="testrad2" value="one" checked><span>1</span></label>
<label><input class="radio" type="radio" name="testrad2" value="two" ><span>2</span></label>
<label><input class="radio" type="radio" name="testrad2" value="three" ><span>2</span></label>

通过 AJAX 调用，我得到如下 json 字符串：

{"testfield":"Value of testfield", "testinput":"Value of testinput","testrad":"two","testrad2":"three"}

这里是JS代码：

$.ajax({
    type: "POST",
    url: "test.php",
    success: function (echo) {
        var data = JSON.parse(echo);
        for (key in data) {
            var field = $("[name=" + key);                           
            if (field.attr("type") == "radio" || field.attr("type") == "checkbox") {                                
                if ( field.val() == data[key]) {                                   
                    field.prop("checked", true) 
                }
            }else {
                $("[name=" + key).val(data[key]);
            }
        }
    }
});

【问题讨论】：

那是因为您有多个具有相同name 属性的输入。当您使用$("[name=" + key) 和.val() 时，它只比较第一个，因此条件field.val() == data[key] 始终为false。
我最初认为问题的一部分是属性选择器上的括号没有关闭：$("[name=" + key);。但看起来这仍然有效。我从你的问题中学到了一些新东西:)
@FrankModica 我刚刚发现它适用于基于 Firefox 和 Chromium 的浏览器，但不适用于 Safari，所以我们仍然可以认为这是不正确的

标签： javascript jquery html checkbox radio-button

【解决方案1】：

以下是您正在寻找的演示：

var key = 'testrad2';
var val = 'three'; // lets say three from response
var field = $("[name=" + key);


field.each(function(){
  if($(this).val() == val) {
     $(this).attr('checked', true);
  } else {
    $(this).attr('checked', false);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea  rows="3" name="testfield"></textarea>
<input type="text" name="testinput">
<label><input class="radio" type="radio" name="testrad" value="one" checked><span>1</span></label>
<label><input class="radio" type="radio" name="testrad" value="two" ><span>2</span></label>
<label><input class="radio" type="radio" name="testrad2" value="one" checked><span>1</span></label>
<label><input class="radio" type="radio" name="testrad2" value="two" ><span>2</span></label>
<label><input class="radio" type="radio" name="testrad2" value="three" ><span>2</span></label>

【讨论】：

谢谢您的好心先生！这就是我一直在寻找的。span>