基於JSON響應的單選按鈕檢查

我想從json字符串中加載一些值到各種輸入/字段。我的解決方案適用於文本輸入和文本框，但我無法使用它來處理單選按鈕和複選框。你能幫我解決這個問題嗎？基於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]); 
      } 
     } 
    } 
});

來源

2017-05-10 plxhelpme_kindofuser

那是因爲你有相同的'name'屬性多重輸入。當你使用'$（「[name =」+ key）「，然後是'.val（）'時，它只比較第一個，所以'field.val（）== data [key]'的條件總是'false'。 –

我原本以爲部分問題是屬性選擇器上的括號沒有關閉：'$（「[name =」+ key）;'。但它看起來仍然有效。我從你的問題中學到了一些新東西:) –

@FrankModica我剛剛發現它適用於基於Firefox和Chromium的瀏覽器，但不適用於Safari，所以我們仍然可以將其視爲不正確 –

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

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>

來源

2017-05-10 14:14:12

謝謝你，先生！這是我正在尋找的。 –

基於JSON響應的單選按鈕檢查

回答

相關問題