Jquery Change background color of DIV to #333 only when all checkbox is not checked

Question

I have 5 div with class .thumb-folder and inside each contains a checkbox. I also have another div with a class .alarm.

When 1 or many checkboxes is checked the div with .alarm class changes background to red.

How to change the div with the .alarm class to background #333 only when no checkboxes are checked?

Here is a link to jsfiddle of my current code.

Answer 1

Use the sam eselector you used to bind the handler to check if any checkboxes are checked.

  $('.thumb-folder input:checkbox').on('click', function (e) {
      if ($('.thumb-folder input:checkbox').is(':checked')) {
        $('div.alarm').css("background-color","red");
      } 
    else{
        $('div.alarm').css("background-color","#333");
      }
  });

DEMO

Answer 2

You can use length to find the checked checkbox count using :checked

Live Demo

$('.thumb-folder input:checkbox').on('click', function (e) {
  if ($('.thumb-folder :checked').length == 0)
     $('div.alarm').css("background-color", "#333");
  else 
     $('div.alarm').css("background-color", "red");
});