Javascript 如果选中复选框，则Jquery不'；不行？

我试图用进度条为每个复选框进行选择当用户选中其中一个复选框时，进度条将显示。所以我已经编码了进度条的css

display:none$（'.pbar'）.css（'display'，'block'），则还可以设置if复选框，但这不起作用，任何人都可以帮我检查代码吗？我犯了多大的错误。谢谢


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();*/

var PG={
divid:“”，
多重选举：“，
optionitem:[]，
init：函数（divid、multiselection、optionitem）{
PG.divid=divid；
PG.multiselect=multiselect；
PG.optionitem=optionitem；
},
测试：函数（）{
对于（变量i=0；PG.optionitem.length>i；i++）{
警报（PG.optionitem[i].名称）；
}
},
render_1:函数（）{
$.each（数组、函数（i、obj）{
var selection=“”+
“”+obj.value+“”+
"";
$（“#”+PG.divid）.append（selection）；
if（$（'input#'+obj.value.）.is（':checked'））{
$（'.pbar'）.css（'display'，'block'）；
}
});
$（“#调查标题”）.append（“你最喜欢的水果是什么？”）；
$（“#选择”）。附加（“请仅选择1种水果：”；
$（'.the_复选框'）。在（'change'，function（evt）上{
if（$（this）.sides（':checked'）.length>=PG.multiselect）{
此项检查=错误；
}
});
},
render_2:函数（）{
$。每个（w_数组，函数（i，obj）{
var selection=“”+
“+obj.value+”；
$（“#”+PG.divid）.append（selection）；
});
$（“调查标题”）。附加（“项目”）；
$（“#选择”）。追加（“请选择3项：”；
$（'.the_复选框'）。在（'change'，function（evt）上{
if（$（this）.sides（':checked'）.length>=PG.multiselect）{
此项检查=错误；
}
});
},
保存：函数（）{}
}
var数组=[]；
数组[0]={
“名称”：“水果”，
“价值”：“芒果”
};
数组[1]={
“名称”：“水果”，
“价值”：“苹果”
};
数组[2]={
“名称”：“水果”，
“值”：“橙色”
};
数组[3]={
“名称”：“水果”，
“值”：“香蕉”
};
var w_数组=[]；
w_阵列[0]={
“名称”：“com”，
“值”：“RAM”
};
w_阵列[1]={
“名称”：“com”，
“值”：“磁盘”
};
w_阵列[2]={
“名称”：“com”，
“价值”：“书籍”
};
w_阵列[3]={
“名称”：“com”，
“值”：“笔”
};
PG.init（“popupfoot”，“1”，数组）；
第1页（）；
/*PG.init（“调查问题”，“3”，w_数组）；
第2页渲染_2（）*/
您必须为复选框添加一个侦听器来显示进度条

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

});

这是更新后的
，可能是因为如果复选框更改了状态，您没有侦听，请添加代码以将其显示到：
$（'.the_checkbox'）。on（'change'，function（evt）{}）