jQuery 基于复选框值的jQuery Show-Hide DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4444292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Show-Hide DIV based on Checkbox Value
提问by mickormick
Using AJAX I populate a DIV with a bunch of checkboxes (each with it's own unique ID). The IDs are "projectID1", "projectID2", "projectID3" and so on... I have given all checkboxes a class of "pChk".
使用 AJAX，我用一堆复选框（每个都有自己的唯一 ID）填充 DIV。ID 是“projectID1”、“projectID2”、“projectID3”等等……我给所有的复选框都指定了一个“pChk”类。
My end goal is to show the DIV containing the Submit Button if ANY of the checkboxes are checked. The only time the DIV containing the Submit Button show be hidden is if all checkboxes are unchecked.
如果选中任何复选框，我的最终目标是显示包含提交按钮的 DIV。唯一一次隐藏包含提交按钮的 DIV 是在所有复选框都未选中的情况下。
However the code I have come up with below shows/hides the Submit Button DIV for each checkbox instance. In other words, if I have three checkboxes CHECKED and I UNCHECK one of them, the Submit Button DIV get hidden.
但是，我在下面提出的代码显示/隐藏了每个复选框实例的提交按钮 DIV。换句话说，如果我选中了三个复选框并且我取消选中其中一个，则提交按钮 DIV 将被隐藏。
Your expert advice is more than welcome!
非常欢迎您的专家建议！
function checkUncheck() {
$('.pChk').click(function() {
if (this.checked) {
$("#ProjectListButton").show();
} else {
$("#ProjectListButton").hide();
}
});
}
回答by raymosley
While this is old if someone comes across this again (via search). The correct answer with jQuery 1.7 onwards is now:
如果有人再次遇到这个（通过搜索），这已经很旧了。jQuery 1.7 以后的正确答案是：
$('.pChk').click(function() {
if( $(this).is(':checked')) {
$("#ProjectListButton").show();
} else {
$("#ProjectListButton").hide();
}
});
回答by Cybercarnage ?
I use jQuery prop
我使用 jQuery 道具
$('#yourCheckbox').change(function(){
if($(this).prop("checked")) {
$('#showDiv').show();
} else {
$('#hideDiv').hide();
}
});
回答by Gabriele Petrioli
That is because you are only checking the current checkbox.
那是因为您只检查当前复选框。
Change it to
将其更改为
function checkUncheck() {
$('.pChk').click(function() {
if ( $('.pChk:checked').length > 0) {
$("#ProjectListButton").show();
} else {
$("#ProjectListButton").hide();
}
});
}
to check if any of the checkboxes is checked (lots of checks in this line..).
检查是否选中了任何复选框（此行中有很多检查..）。
reference: http://api.jquery.com/checked-selector/
回答by Vaishu
ebdiv is set style="display:none;"
ebdiv 已设置 style="display:none;"
it is works show & hide
这是作品显示和隐藏
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
回答by Lee
You might consider using the :checkedselector, provided by jQuery. Something like this:
您可以考虑使用jQuery 提供的:checked选择器。像这样的东西：
$('.pChk').click(function() {
if( $('.pChk:checked').length > 0 ) {
$("#ProjectListButton").show();
} else {
$("#ProjectListButton").hide();
}
});
回答by Marcelo Agimóvel
A tip to all people that use flat-red, flat-green plugin, because of this plugin the answers above wont work!
给所有使用纯红色、纯绿色插件的人的提示，因为这个插件，上面的答案不起作用！
In that case, use onchange="do_your_stuff();" on the label, for example: Your checkbox here
在这种情况下，使用 onchange="do_your_stuff();" 在标签上，例如：您的复选框在这里
The reason why it doesn't work is that this Jquery creates a lot of objects around the real checkbox, so you can't see if it's changed or not.
不工作的原因是这个Jquery在真正的checkbox周围创建了很多对象，所以你看不到它是否改变了。
But if someone click straight on checkbox, won't work :'(
但是如果有人直接点击复选框，将不起作用:'(
回答by UI Dev
Try this
尝试这个
$('.yourchkboxes').change(function(){
$('.yourbutton').toggle($('.yourchkboxes:checked').length > 0);
});
So it will check for at least one checkbox is checked or not.
所以它会检查至少一个复选框是否被选中。
