开关按钮切换前确认：如何阻止未确认时的状态变更

问题核心是默认的checkbox点击会自动切换状态，得先拦住这个默认行为，再根据用户的确认结果处理：

• 先给开关绑定点击事件，阻止默认的状态切换动作
• 弹出确认提示，用户确认后手动修改开关状态并调用API；用户取消则保持原状态不变

代码实现 #

HTML（保持你原有的结构）

<input type="checkbox" id="switch1" checked data-switch="bool"/>
<label for="switch1" data-on-label="On" data-off-label="Off"></label>

JavaScript

const switchBtn = document.getElementById('switch1');

switchBtn.addEventListener('click', function(e) {
  // 阻止checkbox默认的自动切换行为
  e.preventDefault();
  
  // 弹出确认框，也可以替换成自定义的模态弹窗
  const isConfirmed = confirm('确定要切换状态吗？');
  
  if (isConfirmed) {
    // 用户确认后，手动切换开关状态
    this.checked = !this.checked;
    
    // 准备API请求数据，示例用当前开关状态
    const requestData = { status: this.checked };
    // 调用你的接口
    api_call('你的接口地址', requestData, 'POST'); // 根据实际请求方法调整
  }
  // 用户取消则不做任何操作，保持原有状态
});

如果API调用存在失败可能，建议增加失败回滚逻辑，避免页面状态和后端数据不一致：

switchBtn.addEventListener('click', function(e) {
  e.preventDefault();
  const isConfirmed = confirm('确定要切换状态吗？');
  
  if (isConfirmed) {
    // 记录原状态，用于失败后回滚
    const originalState = this.checked;
    // 先切换页面显示状态
    this.checked = !originalState;
    
    // 假设api_call是返回Promise的异步请求
    api_call('你的接口地址', { status: this.checked }, 'POST')
      .catch(() => {
        // 请求失败，回滚开关状态
        this.checked = originalState;
        alert('状态切换失败，请重试');
      });
  }
});

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