淡入/淡入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 ['和'\\'開頭，用於轉義'['。

希望能有所幫助，思南。