我来帮你搞定这个需求！你的复选框已经能切换URL了，但显示/隐藏元素的逻辑还没补全，咱们一步步来完善：

首先有个重要的小问题：你用了switch作为函数名，但这是JavaScript的关键字，会导致语法错误，得先改成别的名字，比如toggleViewMode，先把复选框的onclick改成onclick="toggleViewMode();"。

接下来分两种场景给你方案，看你需要哪种：

场景1：无刷新切换URL+控制元素（推荐，用户体验更好） #

这种方式不用刷新页面，直接修改URL地址栏，同时切换元素显示状态：

第一步：修改复选框和JS函数 #

<input class="ace ace-switch" data-toggle="tooltip" data-placement="top" value="true" type="checkbox" id="checkBoxId" onclick="toggleViewMode();" >

function toggleViewMode() {
  // 1. 获取当前URL里的viewMode参数
  const urlParams = new URLSearchParams(window.location.search);
  const currentMode = urlParams.get('viewMode') || 'presentation'; // 默认是presentation模式
  const newMode = currentMode === 'presentation' ? 'full' : 'presentation';

  // 2. 无刷新更新URL地址栏
  urlParams.set('viewMode', newMode);
  const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
  history.pushState({ viewMode: newMode }, '', newUrl);

  // 3. 调用函数切换元素显示/隐藏
  updateElementVisibility(newMode);
}

// 封装显示隐藏逻辑的函数，方便复用
function updateElementVisibility(mode) {
  // 示例：根据模式切换不同类名的元素
  // 假设你有.presentation-mode元素（仅在presentation模式显示）和.full-mode元素（仅在full模式显示）
  const presentationElements = document.querySelectorAll('.presentation-mode');
  const fullElements = document.querySelectorAll('.full-mode');

  if (mode === 'presentation') {
    presentationElements.forEach(el => el.style.display = 'block');
    fullElements.forEach(el => el.style.display = 'none');
  } else {
    presentationElements.forEach(el => el.style.display = 'none');
    fullElements.forEach(el => el.style.display = 'block');
  }

  // 如果你是控制单个元素，直接用ID更简单：
  // document.getElementById('target-element').hidden = mode === 'presentation';
}

// 页面加载时，根据当前URL参数初始化元素状态和复选框状态
document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const currentMode = urlParams.get('viewMode') || 'presentation';
  
  // 初始化元素显示
  updateElementVisibility(currentMode);
  // 让复选框状态和当前模式匹配
  document.getElementById('checkBoxId').checked = currentMode === 'full';
});

场景2：刷新页面切换URL（适合需要后端重新渲染页面的情况） #

如果你的页面需要后端根据viewMode参数重新渲染内容，那可以保留页面刷新的逻辑，然后在页面加载时根据URL参数或后端变量控制元素：

第一步：修改JS函数（先改名） #

function toggleViewMode() {
  // 从后端获取当前模式（你原来的写法）
  const currentMode = '<%= viewMode.equals("presentation")?"presentation":"full" %>';
  const newMode = currentMode === 'presentation' ? 'full' : 'presentation';
  // 跳转刷新页面
  location.href = `../../app/?viewMode=${newMode}`;
}

第二步：页面加载时初始化元素状态 #

document.addEventListener('DOMContentLoaded', () => {
  // 方式1：直接用后端传递的viewMode变量
  const currentMode = '<%= viewMode %>';
  // 方式2：从URL参数读取（如果后端没直接传变量）
  // const urlParams = new URLSearchParams(window.location.search);
  // const currentMode = urlParams.get('viewMode') || 'presentation';

  // 切换元素显示
  updateElementVisibility(currentMode);
  // 同步复选框状态
  document.getElementById('checkBoxId').checked = currentMode === 'full';
});

// 和场景1一样的显示隐藏函数
function updateElementVisibility(mode) {
  // 这里写你的元素控制逻辑，比如：
  const targetElement = document.getElementById('some-element');
  targetElement.style.display = mode === 'full' ? 'block' : 'none';
}

几个关键注意点： #

• 一定要避免用JS关键字当函数名，比如switch、class这些，会直接报错。
• 复选框的初始状态必须和当前viewMode匹配，不然用户打开页面时复选框状态和实际模式不一致，体验很差。
• 显示隐藏元素时，除了style.display，还可以用hidden属性（更简洁：el.hidden = true/false），或者切换CSS类（比如给元素加hidden类，通过CSS控制显示），根据你的项目风格选择就行。

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