JQuery Increment/Decrement 值取决于选中的复选框

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

和一个计数器，该计数器应根据 selected 的框数进行更新。使用下面的 JQuery 我可以递增，但是当我单击 selected 复选框（删除 select 项目）时，它不会递减一个，我不明白为什么。

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 声明。如果我只单击一个复选框，计数器会上下递增，但是一旦我 select 多个复选框，计数器就会上升，但当我取消 select 复选框时，计数器不会下降。

拜托，任何指导将不胜感激！

Answer 1

问题是因为您的 jQuery 选择器在 if 条件下 $('input:checkbox') 正在选择页面中的 all 复选框。当您随后调用 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 选择器来避免 class 的 addition/removal

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

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

JQuery Increment/Decrement 值取决于选中的复选框

JQuery Increment/Decrement value depending on selected checkboxes

javascript

jquery

pug

increment

decrement