javascript - 显示带有来自 json 的真实值的复选框

Question

我有一个简单的部分，其中包含一个带有来自 json 的复选框的简单 block

现在我能够显示带有复选框的 block ，我能够在单击时将复选框的状态(例如 true 或 false)保存到 json，现在我想显示这些 block 及其状态(例如 true 或 false)。我能够显示带有复选框的 block ，但我不知道如何显示带有复选框状态的 block ，例如 true 或 false 这里是 json。

这是 json

{
    "movies": [
        {
            "left": 336.109375,
            "top": 78,
            "movieid": "1",
            "checkbox": true
        },
        {
            "left": 733.109375,
            "top": 79,
            "movieid": "3",
            "checkbox": false
        }
    ],
    "connections": []
}

这是我显示 block 的方式

  addMovieBlock(title, flowchart[i].movieid, flowchart[i].left, flowchart[i].top, true, flowchart[i].checkbox);

这里我得到这个结果

 console.log(flowchart[i].checkbox); 

显示这个

但我想要的是这个

UPDATE : addmovieBlock function

  // function for generating new block movie
    function addMovieBlock(title, id, left, top, addtojson, videoChecked) {
        var newMovieBlock = $('<div class="movie-block statemachine-demo node">' + title + ' <span class="remove"><i class="fa fa-trash" aria-hidden="true"></i></span></div>');
        newMovieBlock.attr("movieid", id);
        newMovieBlock.attr("id", "movieblock" + id);
        newMovieBlock.css("left", left + "px");
        newMovieBlock.css("top", top + "px");

        $(".main-container").append(newMovieBlock);

        if (addtojson == true) {
            schematJson.push({
                left: left,
                top: top,
                movieid: newMovieBlock.attr("movieid"),
            });
        }

        //for (var i = 0; i < schematJson.length; i++) {
            $('<input />', {
                type : 'checkbox',
                value: 'value'
            })
            .appendTo(newMovieBlock); 

       $('input[type=checkbox]').on('change', function(){
               $('input[type=checkbox]').prop("checked", false);
                $(this).prop("checked", true);

            videoChecked = $(this).parent().attr('movieid');


            for (var a = 0; a < schematJson.length; a++) {
                if (schematJson[a].movieid == videoChecked) {

                    schematJson[a].checkbox = true;

                }else{
                    schematJson[a].checkbox = false; 
                }

                var moviesparams = JSON.stringify({
                    moviesparams: schematJson
                });
                $.ajax({
                    type: 'POST',
                    data: {
                        moviesparams: moviesparams
                    },
                    url: 'save_movies_block.php',
                    success: function(data) {
                        $('#msg').html(data).fadeIn('slow');
                        $('#msg').delay(2000).fadeOut('slow');
                    },
                    error: function() {
                        $('#error-msg').html(data).fadeIn('slow');
                        $('#error-msg').delay(2000).fadeOut('slow');
                    }
                });
          }
        });
    }

我需要改变什么才能得到我想要的东西？

Answer 1

    //append checkbox in variable input 
  var input = $('<input />', {
                type : 'checkbox',
                value: 'value'
            });

           //if videoChecked (flowchart[i].checkbox) value is true add attr checked true
            if(videoChecked){
            input.attr('checked',true);
            }else{
            //if videoChecked value is false add attr checked false
            input.attr('checked',false);
            }
            input.appendTo(newMovieBlock);