基于复选框值的jQuery Show-Hide DIV答案

【问题标题】：jQuery Show-Hide DIV based on Checkbox Value基于复选框值的jQuery Show-Hide DIV
【发布时间】：2011-05-25 13:31:37
【问题描述】：

使用 AJAX，我用一堆复选框填充了一个 DIV（每个复选框都有自己的唯一 ID）。 ID 是“projectID1”、“projectID2”、“projectID3”等等……我给所有复选框都赋予了“pChk”类。

如果选中任何复选框，我的最终目标是显示包含提交按钮的 DIV。唯一一次隐藏包含提交按钮的 DIV 是所有复选框都未选中。

但是，我在下面提出的代码显示/隐藏了每个复选框实例的提交按钮 DIV。换句话说，如果我选中了三个复选框并取消选中其中一个，则提交按钮 DIV 将被隐藏。

非常欢迎您的专家建议！

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

【问题讨论】：

记住，如果你显示用JS的提交按钮，你也应该隐藏用JS的按钮，所以没有启用JavaScript的人可以仍然使用表格。以使用屏幕阅读器的人为例。
Toggle div based on checkbox value的可能重复

标签： jquery checkbox show-hide

【解决方案1】：

如果有人再次遇到此问题（通过搜索），这已经很旧了。从 jQuery 1.7 开始的正确答案是：

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

【讨论】：

我真的不知道为什么这么赞成..这是错误的。您只是在检查当前项目，而 OP 特别要求只有在未选中 ALL .pChk 元素时才应进行隐藏。您刚刚重写了代码问题的原因（因为直接使用 this.checked 而不是你使用 jquery 更好..）

【解决方案2】：

我使用 jQuery 道具

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

【讨论】：

【解决方案3】：

那是因为你只选中了当前的复选框。

改成

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

检查是否有任何复选框被选中（这一行有很多检查..）。

参考：http://api.jquery.com/checked-selector/

【讨论】：

非常感谢！像魅力一样工作！有些人只是得到它，而像我这样的人却在挣扎！
如果我们删除“.length > 0”，如果有 2 个或更多复选框和 2 个或更多内容要显示和隐藏，它将不起作用。但是如果添加“.length > 0”，它就像魅力一样。你能解释一下这个逻辑吗（会很简单，但我无法理解）。
@veer 这是因为$('.pChk:checked') 总是返回一个 jquery 对象，无论是否找到匹配项。并且对象在if 检查中评估为真。
感谢 Gaby，是的，它作为对象返回。
这是最好的答案。顺便说一句，不需要这个功能，额外的头疼也没用。

【解决方案4】：

ebdiv 设置为style="display:none;"

这是作品展示和隐藏

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

});

【讨论】：

【解决方案5】：

您可以考虑使用 jQuery 提供的:checked selector。像这样的：

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

【讨论】：

【解决方案6】：

给所有使用 flat-red, flat-green 插件的人的提示，因为这个插件，上面的答案不起作用！

在这种情况下，请使用 onchange="do_your_stuff();"标签上，例如：你的复选框在这里

之所以不起作用，是因为这个jquery在真正的checkbox周围创建了很多对象，所以你看不到有没有变。

但是如果有人直接点击复选框，将不起作用:'(

【讨论】：

【解决方案7】：

试试这个

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

所以它会检查是否至少有一个复选框被选中。

【讨论】：

【解决方案8】：

`显示

$('#cbxShowHide').click(function(){ this.checked?$('#block').show(1000):$('#block').hide(1000); //表演时间 });`

【讨论】：