为何修改checkbox的checked属性后，绑定的事件监听器未触发？

核心问题在于：直接通过JavaScript修改checkbox的checked属性时，不会自动触发input或change事件——只有用户手动点击这类交互操作才会触发事件。所以你在details的toggle监听器里修改eleInputCkbx.checked后，绑定在checkbox上的事件监听器根本没执行，导致按钮的图标和文本没跟着更新。

下面给两种可行的解决方案：

方案一：手动触发checkbox的事件 #

在修改checked属性后，手动创建并触发input（或change）事件，这样就能让第一个监听器执行，同步按钮状态。

修改你的details监听代码：

eleDetailsNL.forEach(item => {
    item.addEventListener('toggle', function() {
        const arrDetailsStat = [];
        eleDetailsNL.forEach(item => {
            arrDetailsStat.push(item.open);
        });

        if (arrDetailsStat.every(item => item === true)) {
            eleInputCkbx.checked = false;
            // 手动触发input事件
            eleInputCkbx.dispatchEvent(new Event('input'));
        } else if (arrDetailsStat.every(item => item === false)) {
            eleInputCkbx.checked = true;
            // 手动触发input事件
            eleInputCkbx.dispatchEvent(new Event('input'));
        };
    });
});

方案二：抽离状态更新函数（更推荐） #

把更新按钮图标、文本和details状态的逻辑抽成独立函数，这样不管是点击checkbox还是details全展开/收起，都直接调用函数，不用依赖事件触发，逻辑更清晰，也避免事件触发的问题。

重构后的完整代码：

<div id="discussion">
    <input type="checkbox" id="expand-collapse-toggle-ckbx" class="btn-check" autocomplete="off">
    <label id="expand-collapse-toggle-btn" class="btn btn-sm btn-primary btn-3d mb-3" for="expand-collapse-toggle-ckbx"><i class="bi bi-arrows-collapse"></i><span> Collapse All</span></label>
    <details open>
        <summary>A</summary>
        This is the first detail summary
    </details>
    <details open>
        <summary>B</summary>
        This is the second detail summary
    </details>
    <details open>
        <summary>C</summary>
        This is the third detail summary
    </details>
</div>

// 元素引用
const eleInputCkbx = document.querySelector('#expand-collapse-toggle-ckbx');
const eleLabelIcon = document.querySelector('#expand-collapse-toggle-btn i.bi');
const eleLabelText = document.querySelector('#expand-collapse-toggle-btn span');
const eleDetailsNL = document.querySelectorAll('#discussion details');

// 抽离：更新按钮状态和details展开/收起的函数
function updateToggleState(isChecked) {
    if (isChecked) {
        eleLabelIcon.classList.remove('bi-arrows-collapse');
        eleLabelIcon.classList.add('bi-arrows-expand');
        eleLabelText.textContent = ' Expand All';
        eleDetailsNL.forEach(item => item.open = false);
    } else {
        eleLabelIcon.classList.remove('bi-arrows-expand');
        eleLabelIcon.classList.add('bi-arrows-collapse');
        eleLabelText.textContent = ' Collapse All';
        eleDetailsNL.forEach(item => item.open = true);
    }
}

// checkbox事件监听：调用更新函数
eleInputCkbx.addEventListener('input', function() {
    updateToggleState(this.checked);
});

// details的toggle事件监听：检查全展开/收起状态，更新checkbox和按钮
eleDetailsNL.forEach(item => {
    item.addEventListener('toggle', function() {
        const allOpen = [...eleDetailsNL].every(d => d.open);
        const allClosed = [...eleDetailsNL].every(d => !d.open);

        if (allOpen) {
            eleInputCkbx.checked = false;
            updateToggleState(false);
        } else if (allClosed) {
            eleInputCkbx.checked = true;
            updateToggleState(true);
        }
    });
});

这个方案的优势是：

• 逻辑解耦，不用依赖事件触发来同步状态
• 代码更简洁，重复逻辑只写一次
• 避免了手动触发事件可能带来的额外问题

内容的提问来源于stack exchange，提问作者Espresso4TheMind