首页 文章

jQuery Show-Hide DIV基于Checkbox Value

提问于
浏览 次
21

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

我的最终目标是在选中任何复选框时显示包含提交按钮的DIV . 包含提交按钮的DIV显示的唯一时间是未选中所有复选框 .

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

非常欢迎您的专业建议！

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

7 回答

  • 5

    如果有人再遇到这个（通过搜索），这已经过时了 . jQuery 1.7以后的正确答案现在是：

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

    我使用jQuery prop

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

    那是因为您只检查当前复选框 .

    将其更改为

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

    检查是否选中了任何复选框（此行中的大量检查......） .

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

    回复于
  • 14

    ebdiv设置 style="display:none;"

    它是作品展示和隐藏

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

});
    回复于
  • 0

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

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

    给所有使用平坦的红绿色插件的人提示，因为这个插件上面的答案不会起作用！

    在这种情况下，使用onchange =“do_your_stuff（）;”在标签上，例如：您的复选框

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

    但如果有人直接点击复选框，将无法正常工作：'（

    回复于
  • 2

    试试这个

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

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

    回复于

相关问题