点击按钮勾选另一HTML页面的checkbox功能失效，该如何修复？

核心问题梳理 #

• terms.html 中 Accept 按钮外层嵌套了带默认跳转逻辑的 <a> 标签，且设置了 target="_blank"，点击时 <a> 标签的跳转优先级高于你写的 onclick 事件逻辑，会直接打开不带 chk=1 参数的注册页面，你的参数追加逻辑根本没有生效
• register.html 中的脚本存在三个隐患：
  1. 如果页面没有提前引入 jQuery 或者 jQuery 加载晚于当前脚本，$('#terms-box') 会直接报错
  2. 没有判断 URL 中是否存在参数就直接调用 url[1] 的方法，当直接打开注册页面没有参数时，会抛出 undefined 相关的JS异常
  3. 用 attr 设置表单的 checked 属性不如 prop 稳定，部分场景下只会修改属性值不会触发表单勾选状态更新
• 额外语义问题：register.html 中 label 的 for 属性值和 checkbox 的 id 不匹配，点击 label 无法触发勾选，不影响自动勾选逻辑但影响用户体验

修复后代码 #

terms.html #

直接移除按钮外层的 <a> 标签，跳转逻辑完全交给JS处理：

<div class="row">
  <input type="button" name="acceptButton" class="btn accept-button" value="Accept" id="acceptButton" onclick="registerCheck(this.id)">
  <input type="button" name="declineButton" id="declineButton" class="btn decline-button" value="Decline" onclick="registerCheck(this.id)">
</div>

<script>
function registerCheck(clicked_id) {
  // 两个按钮的跳转逻辑统一处理，避免重复代码
  if (clicked_id === 'acceptButton') {
    window.open('register.html?chk=1', '_blank'); // 需要新开标签页就保留这行
    // 不需要新开标签页就注释上一行，打开下面这行
    // window.location.href = "register.html?chk=1";
  } else {
    window.location.href = "register.html";
  }
}
</script>

register.html #

优化参数判断逻辑，推荐用原生JS写法避免依赖jQuery：

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="terms-box" name="terms-box">
  <!-- 修复for属性和checkbox id对应，点击label可触发勾选 -->
  <label class="form-check-label" for="terms-box"> &nbsp;
    <a href="{% url 'terms' %}" class="link-terms">Terms & Conditions</a>
  </label>
</div>

<script>
// 原生JS写法，不需要依赖jQuery
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('chk') === '1') {
  document.getElementById('terms-box').checked = true;
}

// 一定要用jQuery的写法参考（需确保jQuery在这段脚本之前加载）
// $(document).ready(function() {
//   const urlParams = new URLSearchParams(window.location.search);
//   if (urlParams.get('chk') === '1') {
//     $('#terms-box').prop('checked', true);
//   }
// })
</script>

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