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

请任何指导将不胜感激！

最佳答案

问题是因为您的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处理程序的范围内是全局变量）。更好的方法是简单地计算每个事件下复选框的数量。您还可以通过仅使用CSS中的:checked选择器来避免添加/删除类。

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

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

关于javascript - jQuery增/减值，取决于选定的复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59753160/