如何通过URL链接选中纯CSS手风琴中的指定checkbox复选框？

注意：CSS仅能读取表单元素的选中状态，无法直接修改checkbox的checkedDOM属性，因此如果要100%保留你现有基于checkbox的多开手风琴逻辑，只需要添加极少量客户端原生JS即可，不需要任何服务端支持；如果完全抗拒使用脚本，可以改用:target伪类实现锚点触发，但无法保留多个条目同时展开的状态。

轻量JS实现（兼容全部原有逻辑，推荐） #

这个方案不需要改动你已写好的CSS样式和交互逻辑，仅需要先修正原有代码的结构错误：你写的代码中每个.content块后多了一个无效的</div>闭合标签，会导致HTML结构解析异常，先把这三个多余标签删除即可。
之后只需要在</body>标签前添加一段原生JS代码，就能实现全部需求：

• 访问带#title1/#title2/#title3这类哈希后缀的链接时，自动选中对应id的复选框、展开对应内容
• 浏览器自动滚动跳转到对应手风琴条目的位置
• 完全保留原有的点击展开/收起、多条目同时展开的交互
• 可选支持点击展开条目时自动更新URL哈希，方便用户随时复制链接分享对应内容

基础版JS代码（仅实现链接打开自动展开跳转） #

<script>
window.addEventListener('load', () => {
  const targetId = window.location.hash.slice(1);
  if (!targetId) return;
  const targetCheckbox = document.getElementById(targetId);
  if (targetCheckbox?.type === 'checkbox') {
    targetCheckbox.checked = true;
    // 延迟滚动等内容展开完成，避免定位偏移
    setTimeout(() => targetCheckbox.scrollIntoView(), 50);
  }
})
</script>

增强版JS代码（支持URL自动同步、前进后退适配） #

如果需要用户点击展开条目时自动更新地址栏链接，点击浏览器前进/后退按钮也能对应展开条目，可以用下面的代码：

<script>
window.addEventListener('load', () => {
  const handleHash = () => {
    const targetId = window.location.hash.slice(1);
    if (!targetId) return;
    const targetCheckbox = document.getElementById(targetId);
    if (targetCheckbox?.type === 'checkbox') {
      targetCheckbox.checked = true;
      setTimeout(() => targetCheckbox.scrollIntoView({behavior: 'smooth'}), 50);
    }
  }
  // 首次加载页面时处理锚点
  handleHash();
  // 监听哈希变化（浏览器前进后退、手动改链接哈希）
  window.addEventListener('hashchange', handleHash);
  // 点击展开条目时自动更新URL
  document.querySelectorAll('input[name="contentbox"]').forEach(cb => {
    cb.addEventListener('change', function() {
      if (this.checked) history.replaceState(null, '', `#${this.id}`);
    })
  })
})
</script>

修正后完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
  <style>
    body {
      font-size: 21px;
      font-family: Tahoma, Geneva, sans-serif;
      max-width: 550px;
      margin: 0 auto;
      background-color: black;
      padding: 20px 0;
    }
    input {
      display: none;
    }
    label {
      display: block;    
      padding: 8px 22px;
      margin: 0 0 1px 0;
      cursor: pointer;
      background: #181818;
      border: 1px solid white;
      border-radius: 5px;
      color: #FFF;
      position: relative;
    }
    label:hover {
      background: white;
      border: 1px solid white;
      color:black;
    }
    label::after {
      content: '+';
      font-size: 22px;
      font-weight: bold;
      position: absolute;
      right: 10px;
      top: 2px;
    }
    input:checked + label::after {
      content: '-';
      right: 14px;
      top: 3px;
    }
    .content {
      background: #DBEECD;
      background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
      background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
      background: linear-gradient(to top left, #DBEECD, #EBD1CD);
      padding: 10px 25px 10px 25px;
      border: 1px solid #A7A7A7;
      margin: 0 0 1px 0;
      border-radius: 1px;
    }
    input + label + .content {
      display: none;
    }
    input:checked + label + .content {
      display: block;
    }
  </style>
</head>
<body>
  <input type="checkbox" id="title1" name="contentbox" />
  <label for="title1">Content 1</label>
  <div class="content">
    My Content 1
  </div>

  <input type="checkbox" id="title2" name="contentbox" />
  <label for="title2">Content 2</label>
  <div class="content">
    My Content 2
  </div>

  <input type="checkbox" id="title3" name="contentbox" />
  <label for="title3">Content 3</label>
  <div class="content">
    My Content 3
  </div>

  <script>
    window.addEventListener('load', () => {
      const handleHash = () => {
        const targetId = window.location.hash.slice(1);
        if (!targetId) return;
        const targetCheckbox = document.getElementById(targetId);
        if (targetCheckbox?.type === 'checkbox') {
          targetCheckbox.checked = true;
          setTimeout(() => targetCheckbox.scrollIntoView({behavior: 'smooth'}), 50);
        }
      }
      handleHash();
      window.addEventListener('hashchange', handleHash);
      document.querySelectorAll('input[name="contentbox"]').forEach(cb => {
        cb.addEventListener('change', function() {
          if (this.checked) history.replaceState(null, '', `#${this.id}`);
        })
      })
    })
  </script>
</body>
</html>

配置完成后，直接发送页面地址#title2这类链接，对方打开后就会自动展开Content 2的内容并滚动到对应位置。

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