我需要在取消选中所有复选框后显示警报框。如果用户单击“取消”,则应再次“选中”最后一个事件复选框。
关闭警报框后,事件复选框将被设置为“已选中”
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">
最佳答案
在尝试了本地/全局变量之后,我找到了一个可行的解决方案
将计数器定义为全局变量
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;
}
关于javascript - 属性更改后 addEventListener 未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59604039/