Jquery if checkbox checked doesn't work?

Question

Im trying to make a selection with progress bar for each checkbox when user checked one of the checkbox, the progress bar will show/display. So bar I already coded the css of progress bar is display:none; and also set if checkbox if checked $('.pbar').css('display','block'); , but this doesn't work , anyone can help me check my code please ? what mistake I have made . Thanks

JS Fiddle

HTML

<div id="popupfoot">
<p id="survey_title"></p>
 <h5 id="choose"></h5>

<div id="survey_question"></div>
</div>

JS

var PG = {
    divid: "",
    multiselection: "",
    optionitem: [],
    init: function (divid, multiselection, optionitem) {
        PG.divid = divid;
        PG.multiselect = multiselection;
        PG.optionitem = optionitem;

    },
    test: function () {
        for (var i = 0; PG.optionitem.length > i; i++) {
            alert(PG.optionitem[i].name);
        }
    },

    render_1: function () {
        $.each(array, function (i, obj) {

            var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
                "<label class='label' for=" + obj.value + ">" + obj.value + "</label>" +
                "<div class='pbar'><div class='pbarinner' style='width:75%;'></div></div>";

            $("#" + PG.divid).append(selection);
                    if ($('input#'+obj.value).is(':checked')) {
                        $('.pbar').css('display','block');
                    }


        });



        $("#survey_title").append("What is your favorite fruit??");
        $("#choose").append("Please select 1 fruit only:");

        $('.the_checkbox').on('change', function (evt) {
            if ($(this).siblings(':checked').length >= PG.multiselect) {
                this.checked = false;
            }
        });



    },
    render_2: function () {
        $.each(w_array, function (i, obj) {
            var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
                "<label class='label' for=" + obj.value + ">" + obj.value + "</label>";


            $("#" + PG.divid).append(selection);

        });

        $("#survey_title").append("item??");
        $("#choose").append("Please select 3 item :");

        $('.the_checkbox').on('change', function (evt) {
            if ($(this).siblings(':checked').length >= PG.multiselect) {
                this.checked = false;
            }
        });



    },
    save: function () {}
}


var array = [];
array[0] = {
    "name": "fruit",
    "value": "mango"
};
array[1] = {
    "name": "fruit",
    "value": "apple"
};
array[2] = {
    "name": "fruit",
    "value": "orange"
};
array[3] = {
    "name": "fruit",
    "value": "banana"
};


var w_array = [];
w_array[0] = {
    "name": "com",
    "value": "RAM"
};
w_array[1] = {
    "name": "com",
    "value": "DISK"
};
w_array[2] = {
    "name": "com",
    "value": "BOOK"
};
w_array[3] = {
    "name": "com",
    "value": "PEN"
};


PG.init("popupfoot", "1", array);
PG.render_1();
/*PG.init("survey_question", "3", w_array);
PG.render_2();*/

Answer 1

You have to add a listener for checkbox to show the progress bar

$('input#'+obj.value).change(
     function(){
        if (this.checked) {
            $('.pbar').css('display','block');
            /*Rest of your code*/
        }
        else
        {
            $('.pbar').css('display','none');
        }

});

Here is the updated JSFiddle