fadein / fadeout div on checkbox select / unselect

Question

I am trying to bring up a menu when any of the checkbox is selected, as you can see in screenshot below, it shows the number of selections and the menu also disappears when none is select.

I am able to bring up the menu with this code

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

However, i dont know how to hide it when the checkboxes are unselected and how to count number of selections.

Thank You.

Answer 1

When you check a checkbox, the focus or click event will be triggered. You can count the checked checkboxes with

$("input:checked").length;

If you use that number to hide your menu it should be possible:

$("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

To count the number of selections you can use:

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

So..

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

This should do what you need,

Your selector doesn't seem alright though. You should make it more specific. for example:

if it starts with id[ you can do it in this way:

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

this will include all input fields their names starting with 'id[' and '\\' this is for escaping this '['.

Hope it helps, Sinan.