1

我需要使用 jQuery 隐藏一个 div，直到选中下面的所有五个复选框。我知道如何为单个复选框执行此操作，但不知道如何为多个复选框执行此操作。

这就是我到目前为止所拥有的。

<input type=checkbox id="cb1" name="cb1">
<input type=checkbox id="cb2" name="cb2">
<input type=checkbox id="cb3" name="cb3">
<input type=checkbox id="cb4" name="cb4">
<input type=checkbox id="cb5" name="cb5">

<div id="hidden">some stuff</div>

如果未选中/选中一个复选框，则下面的 jQuery 仅隐藏/显示 div。

('#hidden').hide();
$('#cb1').click(function() {
    if($('#cb1').is(':checked'))
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});
4

7 回答 7

3

如果您向复选框添加一个通用类，如果页面中存在其他复选框可能会有所帮助。为简化起见，我使用 $(':checkbox') 选择器

var $checks=$(':checkbox').change(function(){
      var allChecked= $checks.filter(':checked').length == $checks.length;
    $('#hidden').toggle( allChecked); /*passing a boolean will tell whether to hide or show*/

})
于 2012-11-11T18:41:43.907 回答
2

在这里，我们单击任何以 cb 开头的检查 - 从其他答案切换

$(function() {
  var CBS = $('input[name^="cb"]');
  CBS.click(function() {
    var show = $('input[name^="cb"]:checked').length==CBS.length;
    $('#hidden').toggle(show); // better solution than show/hide
  }​);​
}​);​

演示

于 2012-11-11T18:38:29.157 回答
2

如果应选中所有复选框，请使用以下代码：

if ($('input:checked').length === 5 /* number of checkboxes */) { ... }

如果其中一些应该是：

var checkedIds = $('input:checked').map(function() {
   return this.id;
}).get();
var neededIds = ['ch1', 'ch2' /*, ... */];
if (checkedIds.toString() === neededIds.toString()) { ... }
于 2012-11-11T18:38:42.210 回答
1

做就是了：

$('[id^=cb]').click(function() {
    if(! $('[id^=cb]:not(:checked)').length)
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});

在这里，我们使用`[id^=cb]以“cb”字符串开头的 id 选择所有元素，然后对于它们的任何单击，我们只检查是否有任何未选中的元素，如果没有，则显示您的 div。

更新：:unchecked更新了我上面的代码以支持jQuery 中没有选择器的事实，而是:not(:checked)必须使用。感谢 KirillIvlev 注意到这一点。

于 2012-11-11T18:38:54.043 回答
1

如果我没看错，您只想在选中所有复选框时才显示 div。我创建了一个jsfiddle，代码如下：

http://jsfiddle.net/jyw9n/

<input type=checkbox id="cb1" name="cb1">
<input type=checkbox id="cb2" name="cb2">
<input type=checkbox id="cb3" name="cb3">
<input type=checkbox id="cb4" name="cb4">
<input type=checkbox id="cb5" name="cb5">

<div id="hidden">some stuff</div>

$('#hidden').hide();
$('input:checkbox').click(function() {
    if(!$('input:checkbox:not(:checked)').length)
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});
于 2012-11-11T18:39:18.983 回答
0

根据您的逻辑，这样的事情也应该起作用，但 mplungjan Idea 比这更好。

$(function() {

$("input").click(function() { 
    if($("#cb1").is(":checked") && $("#cb2").is(":checked")  && $("#cb3").is(":checked") &&  $("#cb4").is(":checked") && $("#cb5").is(":checked"))
    {
        $('#hidden').hide();
    }
    else
    {
        $('#hidden').show();
    }   
});

  })
于 2012-11-11T18:44:57.707 回答
0

我的理解是你想通过比较多个复选框来隐藏或显示一个 div。假设您只想在选中 3 个复选框时显示 div。

简单的方法是，为您要检查的所有复选框提供相同的名称，并在单击时绑定函数以检查所有 3 个复选框是否被选中。如果所有三个都选中显示 div 否则隐藏。

<input type=checkbox id="cb1" name="cb1">
<input type=checkbox id="cb2" name="cb1">
<input type=checkbox id="cb3" name="cb1">
<input type=checkbox id="cb4" name="cb2">
<input type=checkbox id="cb5" name="cb3">
<div id="hidden">some stuff</div>  

<script>
var $hiddenDiv=$('#hidden');
var hideOrShowDivFlag=false
$('input[name=cb1]').click(function(){
    $("input['cb1']").each(function(){
    hideOrShowDivFlag=($(this).is(":checked"))?true:false
    })
    (hideOrShowDivFlag)?$hiddenDiv.show():$hiddenDiv.hide();
});

您可以为任何一组给定的复选框运行此代码。确保你给了他们相同的名字或任何共同的属性，

于 2012-11-11T18:49:59.883 回答