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.

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.

• javascript
• jquery

3 Answers 3

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

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");
});

You can just do this in 3 lines:

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