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

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

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 внутри функции. Если я нажимаю только один флажок, счетчик увеличивается и уменьшается, но как только я выбираю несколько флажков, счетчик увеличивается, но не уменьшается, когда я отменяю выбор поля.

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


javascript jquery increment pug decrement
person ZADorkMan    schedule 15.01.2020    source источник
comment
$('input:checkbox).is(':checked') возвращает состояние первого флажка в документе. Он игнорирует все остальные элементы, соответствующие селектору.   -  person Pointy    schedule 15.01.2020
comment
Спасибо, что нашли время помочь!   -  person ZADorkMan    schedule 15.01.2020

Ответы (1)


arrow_upward
3
arrow_downward

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

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

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... */
}
person Rory McCrossan    schedule 15.01.2020
comment
Большое спасибо! Это работает отлично, и теперь я понимаю, что еще более важно, как я ошибся. Спасибо, что уделили время своему дню! PS Мне нравится, что с помощью .on(change) мне больше не нужно добавлять/удалять классы! - person ZADorkMan; 15.01.2020
comment
@ZADorkMan Рори также изменил отображение счетчика с отображать-затем-увеличивать (bcount ++) на увеличивать-затем-отображать (++bcount). - person freginold; 15.01.2020
comment
@freginold спасибо за улов! Я ТОЛЬКО читал о передаче инкремента или декремента до или после vars, поэтому я должен был это заметить. - person ZADorkMan; 15.01.2020