基于复选框的值，使用jQuery显示/隐藏DIV

Question

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

- mickormick

---

请记住，如果您使用JS显示提交按钮，则还应该使用JS隐藏该按钮，以便没有启用JavaScript的人仍然可以使用表单，例如使用屏幕阅读器的人。 - David Thomas

可能是根据复选框值切换div的重复问题。 - Xahed Kamal

Answer 1

虽然这是旧的信息，但如果有人再次遇到此问题（通过搜索），则 jQuery 1.7及以上版本的正确答案现在是：

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

- raymosley

---

我真的不知道为什么这个帖子被投票得这么高，它是错误的。你只是检查了当前项，而OP明确要求只有在全部.pChk元素都未选中时才应隐藏。你只是重新编写了问题的代码（因为直接使用this.checked比你甚至对jquery的使用更好..）。 - Gabriele Petrioli

Answer 2

我使用jQuery prop功能

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

- Cybercarnage ｼ

Answer 3

那是因为你只检查当前的复选框。

将其更改为

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

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

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

- Gabriele Petrioli

---

非常感谢！运行得很好！有些人就是懂，而像我这样的人则很困难！ - mickormick

如果我们删除“.length > 0”，那么如果有两个或更多的复选框和两个或更多的内容需要显示和隐藏，它将无法工作。但是如果添加“.length > 0”，它就能够完美运行。您能否解释一下这个逻辑（可能很简单，但我无法理解）？ - Veer

@veer 这是因为$('.pChk:checked')始终返回一个jQuery对象，无论是否找到匹配项。而对象在 if 检查中评估为true。 - Gabriele Petrioli

谢谢Gaby，是的，它返回为对象。 - Veer

这是最好的答案。顺便说一下，不需要这个函数，只会增加不必要的麻烦。 - SJacks

Answer 4

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

它可以用于显示和隐藏

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

});

- Vaishu

Answer 5

您可以考虑使用jQuery提供的:checked选择器。类似于这样：

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

- Lee

Answer 6

对于使用 flat-red、flat-green 插件的所有人，这里有一个提示：由于该插件的存在，上面的答案将不起作用！

在这种情况下，可以在标签上使用 onchange="do_your_stuff();"，例如： Your checkbox here

之所以不起作用是因为这个 jQuery 在真正的复选框周围创建了很多对象，因此您无法看到它是否更改。

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

- Marcelo Agimóvel

Answer 7

试试这个

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

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

- UI Dev

Answer 8

`显示

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

- Sadequer Rahman