javascript - 属性更改后 addEventListener 未更新

Question

我需要在取消选中所有复选框后显示警报框。如果用户单击“取消”，则应再次“选中”最后一个事件复选框。

关闭警报框后，事件复选框将被设置为“已选中”

actionOnClose[1].checked = true;

那么为什么“change”监听器没有被这条线更新

actionOnClose[1].checked = true;

import Swal from 'sweetalert2'

let checkboxes = document.querySelectorAll('input.orders-checkbox'),
    checkboxArray = Array.from(checkboxes),
    checkboxesAll = checkboxArray.length,
    checkboxCounter = 0,
    cancleOrderUrl = document.querySelector('input.confirm-cancel');

let alertBox = (data, routeTo, $form = null, ...actionOnClose) =>
{
    Swal.fire({
        // config code
        onClose: () => {
            switch (actionOnClose[0]) {
                case 'restoreCheckbox':
                    actionOnClose[1].checked = true;
                    // resetting counter to 2 does not work
                    // checkboxCounter = 2;
                    break;

                default:
                    break;
            }
        }
    })
};

let observeCheckbox = (event) =>
{
    let self = event.target;

    if (!self.checked) {
        checkboxCounter++;
    }

    if (self.checked) {
        checkboxCounter--;
    }

    if (checkboxCounter === checkboxesAll) {
        alertBox('orders_cancel', cancleOrderUrl.getAttribute('data-route'), null, 'restoreCheckbox', self);
    }
};

checkboxArray.forEach(function (checkbox)
{
    checkbox.addEventListener('change', event => observeCheckbox(event), true);
});

<input type="checkbox" name="line_items[]" id="7858" value="7858" class="orders-checkbox" checked="checked">

<input type="checkbox" name="line_items[]" id="7859" value="7859" class="orders-checkbox" checked="checked">

<input type="checkbox" name="line_items[]" id="7860" value="7860" class="orders-checkbox" checked="checked">

Answer 1

在尝试了本地/全局变量之后，我找到了一个可行的解决方案

将计数器定义为全局变量

window.checkboxCounter = 0;

现在可以重置计数器

switch (actionOnClose[0]) {
   case 'restoreCheckbox':
      // check last unchecked checkbox
      actionOnClose[1].checked = true;

      // reset counter
      window.checkboxCounter = checkboxesAll - 1;
      break;

      default:
         break;
}