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

Answer 1

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

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

Answer 2

我使用 jQuery 属性

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

Answer 3

这是因为您只选中当前复选框。

将其更改为

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

检查是否选中了任何复选框（此行中有很多检查..）。

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

Answer 4

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

它可以显示 &隐藏

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

});

Answer 5

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

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

Answer 6

给所有使用 Flat-Red、Flat-Green 插件的人一个提示，因为这个插件，上面的答案将不起作用！

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

它不起作用的原因是这个Jquery在真实的复选框周围创建了很多对象，所以你看不到它是否改变了。

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

Answer 7

试试这个

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

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

Answer 8

`显示

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