检查所有的div都隐藏

Question

JSFIDDLE

$(document).ready(function() { 
    $(".chk").click(function() { 
     $(".chk:checked").each(function() { 
      $("."+this.id).show(); 
     });  
     $(".chk:not(:checked)").each(function() { 
      $("."+this.id).hide(); 
     }); 
     // give a message if nothing left to show  
    }); 
}); 

<label> 
    <input class="chk" type="checkbox" checked="checked" id="course">Courses 
</label> 
<label> 
    <input class="chk" type="checkbox" checked="checked" id="morning">Morning 
</label> 
<label> 
    <input class="chk" type="checkbox" checked="checked" id="evening">Evening 
</label> 
<ul> 
    <li class="courseBox course">Course</li> 
    <li class="courseBox course evening">Course, Evening</li> 
    <li class="courseBox morning">Morning </li> 
</ul>​ 

如何最优雅的知道，如果所有受影响的div被隐藏？

---

UPDATE：如果你需要一个淡出后检查，你需要把支票回调：

$(".chk:not(:checked)").each(function() { 
    $("."+this.id).fadeOut(function() { 
    if (!$('.courseBox:visible').length) { 
     alert('all are hidden'); 
    } 
    }); 
}); 

Answer 1

if (!$('.courseBox:visible').length) 
    alert('all are hidden'); 

http://jsfiddle.net/JrAhR/6/

Answer 2

你可以试试这个：

$('ul').find(':hidden').length 

这会给你是隐藏的“UL”下的元素个数

Answer 3

您需要:visible选择：

if ($('div:visible').length == 0) alert('no more divs!'); 

Answer 4

计数可见li元素：

if ($('ul li:visible').length == 0) { 
    alert("Everything is gone!") 
} 

更多信息：

:visible selector

Answer 5

您的代码可以简化 如下。

$(document).ready(function() { 
    $(".chk").click(function() { 
     $("." + this.id).toggle(this.checked); 
     if($(".courseBox:visible").length == 0){ 
      alert("All divs are hidden"); 
     } 
    });   
}); 

工作演示 - http://jsfiddle.net/ShankarSangoli/JrAhR/13/