Fadein / Fadeout 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[name='id[]']").focus(function(){
   if ($(this).is(':checked')){
     $("#menu").fadeIn();
    }else{
     $("#menu").fadeOut();
    }
});

Это должно делать то, что вам нужно,

EDIT:

Ваш селектор, похоже, не в порядке. Вы должны сделать это более конкретным. например:

если он начинается с id [вы можете сделать это следующим образом:

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

это будет включать все поля ввода, их имена начинаются с 'id [' и '\', это для экранирования этого '['.

Надеюсь, это поможет, Синан.

Answer 3

Для подсчета количества выборов вы можете использовать:

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

Так ..

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