javascript - Jquery仅在未选中所有复选框时将DIV的背景颜色更改为＃333

Question

我有 5 个div，class .thumb-folder每个里面都包含一个checkbox. 我也有另一个div同班.alarm。

checkboxes当检查1或多个时，div使用.alarm class更改背景为红色。

仅在未选中时如何将其更改为div？.alarm classbackground #333checkboxes

这是我当前代码的 jsfiddle 的链接。

Answer 1

使用您用于绑定处理程序的相同电子选择器来检查是否选中了任何复选框。

  $('.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");
      }
  });

演示

Answer 2

您可以使用长度来查找选中的复选框计数:checked

现场演示

$('.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");
});

Answer 3

你可以在 3 行中做到这一点：

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