Проверьте все дивы скрыты

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>​ 

Как наиболее элегантно знать, если были скрыты все затронутые дивы?

---

UPDATE: Если вам нужно проверить после FADEOUT, необходимо поставить галочку в функции обратного вызова:

$(".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/