基于复选框值的jQuery显示 - 隐藏DIV

使用AJAX我用一堆复选框填充DIV（每个复选框都有自己的唯一ID）。这些ID是“projectID1”，“projectID2”，“projectID3”等......我给所有复选框提供了一类“pChk”。基于复选框值的jQuery显示 - 隐藏DIV

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

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

您的专家意见是欢迎！

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

来源

2010-12-14 mickormick

请记住，如果你*秀*的与JS提交按钮，你也应该*隐藏*与JS按钮，所以人们没有JavaScript启用可以*仍然*使用该形式。以屏幕阅读器为例。 – 2010-12-14 21:21:53

[根据复选框值切换div]可能的重复（http://stackoverflow.com/questions/4337378/toggle-div-based-on-checkbox-value） – 2016-04-22 17:57:02

这是因为您只是检查当前的复选框。

将其更改为

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

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

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

来源

2010-12-14 21:18:06

非常感谢！像魅力一样工作！有些人只是得到它而像我这样的其他人奋斗！ – mickormick 2010-12-14 22:24:11

如果我们删除“.length> 0”，如果有2个或更多复选框和2个或更多内容显示和隐藏，它将不起作用。但是，如果添加“.length> 0”，它就像魅力一样。你能解释一下这个逻辑吗（会很简单，但我无法理解）。 – Veer 2017-04-10 08:41:25

@veer是因为$（'。pChk：checked'）'总是返回一个jquery对象，不管是否找到了匹配的项目。并且对象在'if'检查中评估为真。 – 2017-04-11 13:33:58

你可能会考虑使用:checked selector，的jQuery提供。像这样的：

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

来源

2010-12-14 21:20:15 Lee

我自己使用这种方法。 – mirzu 2011-01-27 20:41:30

虽然这是旧的，如果有人再次遇到这（通过搜索）。使用jQuery 1.7正确答案起现：

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

来源

2012-04-16 11:08:03 raymosley

我真的不知道为什么这是如此upvoted ..这是错误的。你只是检查当前的项目，而OP是特别要求只有*** *** ***'.pChk'元素未被选中才会发生隐藏。你刚刚重写了问题的代码（*更好，因为直接使用'this.checked'而不是使用jquery，即使是那样.. *） – 2014-01-27 10:02:49

是的，它错了... – 2014-05-20 09:11:12

ebdiv设置style="display:none;"

其作品中表现出&隐藏

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

});

来源

2012-06-13 13:17:18 Vaishu

使用jQuery支撑

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

来源

2013-09-03 10:30:10

尝试这

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

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

来源

2014-05-20 09:20:00

对于所有使用扁平红色平绿色插件的人来说，由于这个插件上面的答案不会奏效，所以请小心！

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

它不工作的原因是，这个Jquery围绕真正的复选框创建了很多对象，所以你看不到它是否被改变。

但是，如果有人点击直线上复选框，将无法正常工作：“（

来源

2017-01-23 17:58:01

基于复选框值的jQuery显示 - 隐藏DIV

回答

相关问题