JQuery Значение увеличения / уменьшения в зависимости от выбранных флажков - PullRequest
Новая
       44

JQuery Значение увеличения / уменьшения в зависимости от выбранных флажков

1 голос
/ 15 января 2020

Я в основном там, но, кажется, не могу это взломать, у меня есть простая форма с флажками, 

form#bookingsToDelete(
            action='/list/batchDelete'
            method='POST'
            autocomplete='off'
            )
            tbody
              each doc in list
                -var id = doc._id;
                tr
                  td 
                    input.form-control(type='checkbox' name='ids[]' id='doc._id' value=doc._id onclick='return selectedForDelete();' )
                  td.bg-blue= doc.tourDate
                  td

и счетчиком, который должен обновляться в зависимости от того, сколько ящиков выбрано. Используя ниже JQuery, я могу увеличивать, но когда я нажимаю на выбранный флажок (чтобы отменить выбор элемента), он не уменьшается на единицу, и я не понимаю, почему. 

div.p-2.actionMenu-2.float-right
            button.btn.btn-danger(type='submit' form='bookingsToDelete' value='Submit')
              span Delete 
              span.deleteCounter.badge.badge-light

custom. js

let bcount ='1';
function selectedForDelete() {
  if ($('input:checkbox').is(':checked') ) {
    $('input:checkbox:checked').addClass('checked');
    $('.deleteCounter').text( bcount ++ );
  } else {
    $('input:checkbox').removeClass('checked');
    $('.deleteCounter').text( bcount -- );
  }
}

Я пробовал bcount +1 bcount -1 и перемещал объявление var внутри функции. Если я нажму только один флажок, счетчик будет увеличиваться и уменьшаться, но как только я выберу несколько флажков, счетчик поднимается, но не убывает go при снятии флажка.

Пожалуйста, любые указания б высоко ценится!

1 Ответ

3 голосов
/ 15 января 2020

Проблема в том, что ваш jQuery селектор в состоянии if, $('input:checkbox') выбирает все флажки на странице. Когда вы затем вызываете is(), он запрашивает только проверенное состояние first one.

Чтобы исправить это, вам нужно получить ссылку на элемент, вызвавший событие изменения. Лучший способ сделать это - незаметно прикреплять обработчики событий. Попробуйте это: 

jQuery(function($) {
  var bcount = 1;

  $('input:checkbox').on('change', function() {
    var $el = $(this);
    if ($el.prop('checked')) {
      $el.addClass('checked');
      $('.deleteCounter').text(++bcount);
    } else {
      $el.removeClass('checked');
      $('.deleteCounter').text(--bcount);
    }
  });
});

Однако это все еще не оптимально. Это не DRY, и он содержит глобальную переменную (в любом случае глобальную в рамках обработчика jQuery document.ready). Лучшим подходом было бы просто подсчитать количество флажков под каждым событием. Вы также можете избежать добавления / удаления класса, просто используя селектор :checked в CSS

jQuery(function($) {
  $('input:checkbox').on('change', function() {
    $('.deleteCounter').text($('input:checkbox:checked').length);
  });
});

input:checked {
  /* your styling here... */
}
...