2017-06-29 68 views
0

我在窗體上有4個不同組的單選按鈕。每個組都有不同的名稱集。我使用JSON對象來存儲我的數據。在循環數據時,我在前面使用帶有附加詞的鍵。這將爲我提供該數據集的每個表單元素的名稱。我成功地填充了文本和複選框的輸入字段,但仍然可以獲得單選按鈕。這裏是我的JSON數據:如何根據名稱和值檢查單選按鈕?

var jsonData = { 
    myForm:{"hs_mask":"Yes","name":"John Miller","hs_cktr":"Yes"} 
} 

這裏是我的邏輯來填充表單字段:

$.each(jsonData[jsonKey], function(index, element) { 
    var frmElementName = $('[name="'+'frm'+index.toLowerCase()+'"]'); 
    var frmElementId = $('#frm'+index.toLowerCase()); 
    var frmVal = $.trim(decodeURIComponent(element)) 

    if(frmElementName.attr('type') == 'text'){ 
     frmElementId.val(frmVal); 
    }else if(frmElementName.attr('type') == 'checkbox'){ 
     (frmVal == 'Yes') ? frmElementId.attr('checked',true) : frmElementId.attr('checked',false); 
    }else if(frmElementName.attr('type') == 'radio'){ 
     $('input[name="'+'frm'+index.toLowerCase()+'"][value="' + frmVal + '"]').prop('checked', true); 
    } 
}); 

我曾嘗試上面的代碼,但我沒有看到單選按鈕檢查。正如你所看到的文本和複選框類型,我使用ID來填充字段,但對於我使用元素名稱的單選按鈕。如果有人看到我的代碼破了,請告訴我。謝謝。

回答

0

今天我遇到了類似的問題。這是我的解決方案:

function jsonToForm(json) { // populates form elements with JSON data 
for (var x in json) { // JSON iteration 
    var id = x; // in my original code x has to be processed to match form and object names 
    var element = document.getElementById(id); 
    if (element) { // if JSON key corresponds to a non radio button (unique id) form element 
     element.value = json[x]; // updates form values 
       } else if (document.getElementsByName(id)) { // for radio buttons the name attribute is used as JSON key won't match separate radio button id's. 
     var radios = document.getElementsByName(id); 
     for (var i = 0; i < radios.length; i++) { // radio button iteration 
      if (radios[i].value == json[x]) { 
       radios[i].checked=true; 
       break; 
      } 
     } 
    } 
}} 

Populating radio buttons and JavaScript object properties with JSON data