Question

下面是我的json数据，它存储在Checklistdata.json中，我想使用jquery显示键和标签作为复选框，我的jquery只会显示带复选框的标签。任何帮助，我将不胜感激。

[
    {
        "Beginning": [
            {
                "label": "Enter basic information"
            },
            {
                "label": "Enter name of Vendor "
            }
        ]
    }
]

以下是我的jquery !!

$.getJSON('Checklistdata.json', function (data) {
$.each(data, function (i, entity) {
                $('#Checklist').append($('<input />', { 'type': 'checkbox','label': entity.label, 'value': entity.is_correct })).append(entity.answer + '<br />');
            });

           $("#checkboxes").on('change', '[type=checkbox]', function () {
                console.log($(this).val());
            });
        });

Answer 1

这是FIDDLE，可能会让你入门。

数组将等同于您的json数据。您需要设置样式并更改格式以满足您的需求。它不是很优雅，但似乎有效。

JS

var myarray1 = ['y', 'n', 'y', 'y', 'y'];
var myarray2 = ['A', 'B', 'C', 'D', 'E'];

$('#mybutton').click(function(){

  $.each(myarray2, function(key, value){
             $('#holderdiv').append(value + "<input type='checkbox' />" + '<br />');
                                        });

    $('input[type=checkbox]').each(function(index){
            if(myarray1[index] == 'y')
                {
                    $(this).prop('checked', true); 
                }
                                          });
});

编辑：

好的，这是适用于您的阵列的新FIDDLE。

使用jsonlint.com检查json数组的有效性是个好主意。

新JS

var mydata = {
    "Beginning": [
        { "label": "Enter basic information", "id": 1 },
        { "label": "Enter name of Vendor ",  "id": 2 }
                  ]
               };

var firstvar = mydata.Beginning[0].id;

$('#mybutton').click(function(){

    $.each(mydata.Beginning, function(key, value){
             $('#holderdiv').append(mydata.Beginning[key].label + "<input type='checkbox' />" + '<br />');
                                        });

    $('input[type=checkbox]').each(function(index){
            if( mydata.Beginning[index].id == 1)
                {
                    $(this).prop('checked', true); 
                }
                                          });
});

Answer 2

您在迭代数据的方式就是问题所在。将data更改为：

后

var data= [
    {
        "Beginning": [
            { "label": "Enter basic information","id":1 }, 
            { "label": "Enter name of Vendor ","id":2 } 
        ]
    }
];

更改您的代码行：

$.each(data, function(key, val) {

到

$.each(data[0].Beginning, function(key, val) {

这是因为data是一个对象数组。进行此更改后，您将看到它更接近您想要实现的目标！这应该可以让您进一步修改代码以执行您希望它执行的操作。

Answer 3

我得到了答案。必须对JSON数据存储进行一些更改，但它满足我的要求。以下是小提琴的答案。 http://jsfiddle.net/Suma_MD/fWLgD/2/

var data = getData(),
    $checklist = $('#checklist');

data.forEach(function (v) {
    var Description = v.Description;
    $checklist.append('<br>' + Description);
    var Array1=v.Checklist;
    var Array2;
    Array1.forEach(function(d){
      Array2 = d.label;
        $checklist.append('<br>' +"<input type='checkbox' />" + Array2 );
});
});



function getData() {
  return [
  {
      "Description": "Beginning1",
      "Checklist": [
          {
              "label": "Enter basic information",
          },
          {
              "label": "Enter basic information",
          },
          {
              "label": "Enter basic information",
          },
          {
              "label": "Enter basic information",
          }
      ]
  },    
  {
      "Description": "Beginning2",
      "Checklist": [
          {
              "label": "Enter basic ",
          },
          {
              "label": "Enter basic ",
          },
          {
              "label": "Enter basic ",
          },
          {
              "label": "Enter basic ",
          }
      ]
  }  
  ];
}

HTML：<div id="checklist"></div>

使用JQUERY显示JSON数据中的键和标签

3 个答案: