Javascript 使用jQuery隐藏div，直到选中多个复选框

我需要使用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>  

---

在这里，我们单击任何以cb-toggle from other answer开头的检查

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

---

在这里，我们单击以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
  }​);​
}​);​

---

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

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()) { ... }

---

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

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()) { ... }

只要做：

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

在这里，我们使用

`[id^=cb]

选择id以“cb”字符串开头的所有元素，然后单击它们，我们只需检查是否有未选中的元素，如果没有，则显示您的div

更新：更新了上面的我的代码，以支持jQuery中没有

：未选中的
选择器，而必须使用
：未（：选中）
。感谢KirillIvlev注意到这一点。
只要做：

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

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

更新：更新了上面的我的代码，以支持jQuery中没有
：未选中的
选择器，而必须使用
：未（：选中）
。感谢KirillIvlev注意到这一点。
如果我读对了，您只想在选中所有复选框的情况下显示div。我创建了一个JSFIDLE，代码如下：



一些东西
$（“#隐藏”）.hide（）；
$（'input:checkbox'）。单击（函数（）{
if（！$（'input:checkbox:not（：checked））.length）
{
$（“#隐藏”）.show（）；
}
其他的
{
$（“#隐藏”）.hide（）；
}   
});
如果我读对了，您希望仅在选中所有复选框时显示div。我创建了一个JSFIDLE，代码如下：



一些东西
$（“#隐藏”）.hide（）；
$（'input:checkbox'）。单击（函数（）{
if（！$（'input:checkbox:not（：checked））.length）
{
$（“#隐藏”）.show（）；
}
其他的
{
$（“#隐藏”）.hide（）；
}   
});
如果您将公共类添加到复选框中，如果页面中存在其他复选框，则可能会有所帮助。为了简化，我使用$（'：复选框）选择器

若将公共类添加到复选框中，若页面中存在其他复选框，则可能会有所帮助。为了简化，我使用$（'：复选框）选择器

按照你的逻辑，类似这样的东西也应该起作用，但mplungjan的想法比这更好

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

  })

按照你的逻辑，类似这样的东西也应该起作用，但mplungjan的想法比这更好

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

  })

我的理解是，您希望通过比较多个复选框来隐藏或显示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();
});


一些东西
var$hiddenDiv=$（“#隐藏”）；
var hideOrShowDivFlag=false
$（'input[name=cb1]'）。单击（函数（）{
$（“输入['cb1']”）。每个（函数（）{
hideOrShowDivFlag=（$（this）.is（“：checked”）？true:false
})
（hideOrShowDivFlag）？$hiddenDiv.show（）：$hiddenDiv.hide（）；
});

您可以为任何一组给定的复选框运行此代码。确保您给了他们相同的名称或任何公共属性，
我的理解是，您希望通过比较多个复选框来隐藏或显示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();
});


一些东西
var$hiddenDiv=$（“#隐藏”）；
var hideOrShowDivFlag=false
$（'input[name=cb1]'）。单击（函数（）{
$（“输入['cb1']”）。每个（函数（）{
hideOrShowDivFlag=（$（this）.is（“：checked”）？true:false
})
（hideOrShowDivFlag）？$hiddenDiv.show（）：$hiddenDiv.hide（）；
});

您可以为任何一组给定的复选框运行此代码。确保您为它们指定了相同的名称或任何公共属性，
是否要在选中所有复选框时显示div？是否要在选中所有复选框时显示div？$%^#it，我回答的是：：p$%^#it，我回答的是：：PWhy检查id而不是类型
input[type=“checkbox”]
没有未选中的选择器
is（）
不会循环集合，请使用
filter（）
instead@KirillIvlev感谢您指出，我已经相应地更新了答案。@charlietfl
is
如果有任何元素匹配，将返回true。为什么要检查id而不是类型
input[type=“checkbox”]
没有未选中的选择器
is（）
不会循环集合，请使用
filter（）
instead@KirillIvlev谢谢你指出，我已经相应地更新了我的答案。@charlietfl
is
将在任何元素匹配时返回true。向上投票选择
change
和
toggle
<代码>过滤器
也不错。不错。谢谢你的切换，谢谢你的代码，这就是我想要它做的。我按照你的建议添加了一个普通类。这些天可以更改吗？我希望单击，因为更改过去意味着需要模糊。多年来，我一直在复选框和收音机上使用jQuery
change
。很久以前，我在IE中遇到了一些问题，
单击
。它将在clcikUpvoting时注册
更改
和
切换
<代码>过滤器
也不错。不错。谢谢你的切换，谢谢你的代码，这就是我想要它做的。我按照你的建议添加了一个普通类。更改可以吗