淡入/淡入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();
   }
});

Answer 2

要计算选择数量，可以使用：

$("input[type='checkbox']:checked").length;

所以..

$("input[type='checkbox']").click(function(){
  if ($("input[type='checkbox']:checked").length < 1)
    $("#menu").hide();
});

Answer 3

$("input[name='id[]']").focus(function(){
   if ($(this).is(':checked')){
     $("#menu").fadeIn();
    }else{
     $("#menu").fadeOut();
    }
});

这应该做您需要的，

编辑：

您的选择器似乎并不正确。 您应该使其更具体。 例如：

如果以id [开头，您可以通过以下方式进行操作：

$("input[name^=id\\[]")

这将包括所有输入字段，其名称以'id ['和'\\'开头，用于转义'['。

希望能有所帮助，思南。