JQuery增/减值，取决于选定的复选框

Question

我几乎在那里，但似乎无法破解，我有一个简单的带有复选框的表格，

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声明移入函数内。如果仅单击一个复选框，则计数器会递增和递减，但是一旦选中多个复选框，计数器就会上升，但取消选中该复选框时不会递减。

请，任何指导将不胜感激！

Answer 1

问题是因为您的jQuery选择器处于if条件，$('input:checkbox')正在选择

all页面中的复选框。当您随后调用is()时，它仅询问first的检查状态。

要解决此问题，您需要获得引发变更事件的元素的引用。最好的方法是毫不干扰地附加事件处理程序。试试这个：

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

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