[英]Jquery if checkbox checked doesn't work?
我试图在用户选中复选框之一时使用每个复选框的进度条进行选择,进度条将显示/显示。 所以,我已经编写了进度条的CSS的bar display:none;
并设置是否选中$('.pbar').css('display','block');
,但是这不起作用,有人可以帮我检查我的代码吗? 我犯了什么错误。 谢谢
的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();*/
您必须为复选框添加一个侦听器以显示进度栏
$('input#'+obj.value).change(
function(){
if (this.checked) {
$('.pbar').css('display','block');
/*Rest of your code*/
}
else
{
$('.pbar').css('display','none');
}
});
这是更新的JSFiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.