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 我可以递增，但是当我单击选中的复选框（取消选择该项目）时，它不会递减 1，我不明白为什么。

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

问题是因为您在if 条件下的jQuery 选择器$('input:checkbox') 正在选择页面中的所有 复选框。然后，当您调用 is() 时，它只会询问 first 的已检查状态。

要解决此问题，您需要获取对引发更改事件的元素的引用。最好的方法是不显眼地附加您的事件处理程序。试试这个：

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... */
}