javascript - 复选框选择/取消选择上的淡入/淡出 div

Question

我试图在选中任何复选框时调出一个菜单，如下面的屏幕截图所示，它显示了选择的数量，并且当未选择任何复选框时，菜单也会消失。

我可以使用此代码调出菜单

$("input[name='id[]']").focus(function(){
    $("#menu").fadeIn();
});

但是，我不知道如何在取消选中复选框时隐藏它以及如何计算选择的数量。

谢谢。

Answer 1

当您选中复选框时，将触发焦点或单击事件。您可以使用

来计算选中的复选框的数量

$("input:checked").length;

如果您使用该数字来隐藏菜单，那么应该可以:

$("input[name='id[]']").click(function(){
   if($("input:checked").length > 0) { //checked boxes?
      if($("#menu:visible").length == 0) { //menu not visible?
          $("#menu").fadeIn();
      }
   } else {
      $("#menu").fadeOut();
   }
});