jQuery Show-Hide DIV基于Checkbox Value

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我用一堆复选框填充DIV(每个复选框都有自己唯一的ID)。 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。换句话说,如果我有三个复选框CHECKED并且我取消其中一个复选框,则提交按钮DIV将被隐藏。

Your expert advice is more than welcome!

非常欢迎您的专业建议!

function checkUncheck() {     $('.pChk').click(function() {        if (this.checked) {            $("#ProjectListButton").show();        } else {            $("#ProjectListButton").hide();        }    }); }

7 个解决方案

#1

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();    }});

#2

I use jQuery prop

我使用jQuery prop

$('#yourCheckbox').change(function(){  if($(this).prop("checked")) {    $('#showDiv').show();  } else {    $('#hideDiv').hide();  }});

#3

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/

#4

ebdiv is set style="display:none;"

ebdiv设置为style =“display:none;”

it is works show & hide

它是作品展示和隐藏

$(document).ready(function(){    $("#eb").click(function(){        $("#ebdiv").toggle();    });});

#5

You might consider using the :checked selector, provided by jQuery. Something like this:

您可以考虑使用jQuery提供的:checked选择器。像这样的东西:

$('.pChk').click(function() {    if( $('.pChk:checked').length > 0 ) {        $("#ProjectListButton").show();    } else {        $("#ProjectListButton").hide();    }});

#6

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在真正的复选框周围创建了很多对象,所以你无法看到它是否被改变了。

But if someone click straight on checkbox, won't work :'(

但如果有人直接点击复选框,将无法正常工作:'(

#7

Try this

$('.yourchkboxes').change(function(){    $('.yourbutton').toggle($('.yourchkboxes:checked').length > 0);});

So it will check for at least one checkbox is checked or not.

因此,它将检查是否选中了至少一个复选框。

#1