javascript - 基于 JSON 响应的单选按钮检查

Question

我正在尝试将一些值从 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":"测试字段的值", "testinput":"测试输入的值","testrad":"二","testrad2":"三"}

这是 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]);
            }
        }
    }
});

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