如何用JS批量显隐复选框及按钮组，解决移除d-none类失效问题

• 你的代码操作对象错误：d-none类实际是添加在包裹input的.switch标签上，你直接操作input元素移除类当然不会生效
• jQuery语法使用错误：遍历过程中拿到的$(this)是jQuery封装对象，没有原生classList属性，要么转成原生DOM元素操作，要么使用jQuery提供的removeClass方法

你提到的给所有需要控制显隐的元素设置统一分组标识是非常合理的方案，比直接按标签选择扩展性、可维护性更高，后续新增编辑态需要显隐的元素不需要修改JS逻辑，只要加对应分组类即可。

步骤1：给所有需要控制的元素添加统一分组类 #

给所有复选框的.switch包裹标签、保存按钮、取消按钮都添加统一的自定义类editable-control，初始状态统一加d-none隐藏即可。
修改后的HTML代码片段示例：

<!-- 单个复选框示例 -->
<label class='switch align-top d-none editable-control'>
    <input type='checkbox' id='exampleCheck1'>
    <span class='slider round'></span>
</label>

<!-- 保存按钮示例 -->
<button type="button" class="float-left btn btn-success rounded text-light font-weight-bold h6 p-1 d-inline-block mr-2 d-none invisible editable-control" disabled>
    <svg>...</svg>
</button>

<!-- 取消按钮示例 -->
<button type="button" class="float-left btn btn-danger rounded text-light font-weight-bold h6 p-1 d-inline-block mr-2 d-none invisible editable-control" disabled>
    <svg>...</svg>
</button>

步骤2：修改editDashboardContent函数实现批量显隐 #

直接通过分组类选中所有需要显示的元素，批量移除隐藏类即可：

function editDashboardContent() {
    // 处理全选控件显隐
    const selectAllEl = document.getElementById("selectAll");
    selectAllEl.classList.remove('invisible', 'd-none');
    selectAllEl.classList.add('visible', 'd-flex');

    // 批量处理所有分组内的元素显隐
    document.querySelectorAll('.editable-control').forEach(el => {
        el.classList.remove('d-none', 'invisible');
        el.removeAttribute('disabled');
    });

    // 隐藏编辑按钮
    document.querySelector('button[onclick="editDashboardContent();"]').classList.add('d-none');
}

如果需要做取消编辑的逻辑，也可以直接通过.editable-control批量加回d-none类即可，逻辑完全统一。

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup