Question

我有5 div class .thumb-folder，其中每个都包含checkbox。我还有另一个div，其中有一个班级.alarm。

如果选中1个或多个checkboxes，div .alarm class会将背景更改为红色。

如果仅在未选中div的情况下，如何将.alarm class与background #333更改为checkboxes？

这是我当前代码的jsfiddle的a link。

Answer 1

使用您用于绑定处理程序的sam eselector来检查是否选中了任何复选框。

  $('.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

您可以使用: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");
});

Answer 3

您可以在3行中执行此操作：

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

Jquery仅当未选中所有复选框时，才将DIV的背景颜色更改为＃333

3 个答案: