2017-06-29 70 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