直到多个复选框被选中

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

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

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

来源

2012-11-11 forex4noobs

你想展示div时所有复选框被选中？ –

是的，那是对的。 – forex4noobs

如果添加一个公共类检查框，如果在网页存在其他复选框可能会有帮助。为了简化我使用$（“：复选框”）选择

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-11 18:41:43 charlietfl

Upvoting用于'change'和'toggle'。过滤器也很好。 –

不错的一个。感谢切换 – mplungjan

完美，感谢代码，这是我想要的。我按照你的建议添加了一个普通的类。 – forex4noobs

这里我们单击任何与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 
    }); 
});

DEMO

来源

2012-11-11 18:38:29 mplungjan

$％^＃它，我回答说，：P – SpYk3HH

谢谢，但经过测试，这不起作用.... http://jsfiddle.net/3xRsd/ – forex4noobs

由于jQuery是（）返回布尔。 – dyersituations

如果所有的复选框都应该进行检查切换，使用此代码：

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-11 18:38:42

为什么你把===，我的意思是三个等号 – defau1t

为什么不呢？如果可能的话，使用强相等只是一种习惯:) –

@ defau1t'==='意思是“相等和相同类型”; '=='表示“类型转换后相等”。前者更“安全”，速度更快。 –

只要做到：

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

这里我们使用`[id^=cb]选择与ID在“CB”的字符串开始，然后对他们的任何点击我们只是检查是否有任何人未经检查的所有元素如果没有，那么显示你的div。

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

来源

2012-11-11 18:38:54 Nelson

为什么要检查id而不是类型？ '''input [type =“checkbox”]''' –

没有这样的事情：未选中的选择器 –

'is（）'不会循环集合，请使用'filter（）'而不是 – charlietfl

如果我没有看错，你想，只显示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-11 18:39:18 dyersituations

像这样的事情按照你的逻辑也应该可行，但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(); 
    } 
}); 

    })

来源

2012-11-11 18:44:57 defau1t

除了我只计算cb1 - 现在我想我知道了:) – mplungjan

我明白是要隐藏或通过比较多个复选框显示一个div。假设你只想选择3复选框时才显示div。

简单的办法是，给所有您要检查并结合他们的点击功能检查所有的3个复选框是否已选中或未被复选框相同的名称。如果所有三个都选中了show div else hide。

<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-11 18:49:59 Samyak

直到多个复选框被选中

回答

相关问题