3个复选框差异化更新URL参数时userNum引发JS异常问题

• 核心触发JS中断的原因是userNum数值输入框默认带有disabled属性，你没有编写「并发用户测试」复选框和该输入框的状态联动逻辑。被设置为disabled的表单控件不会被FormData收集，勾选对应复选框后输入框仍处于禁用状态，formData.get("userNum")会返回null，后续如果对这个null值做字符串、数值类操作（比如调用字符串方法、转数字做计算），会直接抛出类型错误导致JS运行中断。另外你给默认禁用的输入框加required校验本身也不符合表单校验逻辑。
• URL拼接时错误在JS字符串中使用了HTML转义字符&。&是HTML源码中用来表示&的转义写法，直接写在JS代码里会被原样解析为&而非URL参数分隔符&，会导致跳转后的页面无法正确解析URL参数。
• 多层嵌套if的逻辑写法存在分支遗漏，比如「勾选吞吐量测试、不勾选用户测试、不勾选连接效率测试」的场景没有对应处理逻辑，触发时函数不会执行任何跳转，逻辑不闭环。
• 额外冗余问题：你给name=user的复选框绑定了onsubmit事件，但submit事件只会在<form>元素上触发，绑定在复选框上完全无效。

按以下步骤调整即可：

1. 增加复选框和用户数输入框的联动逻辑：勾选「并发用户测试」复选框时，移除userNum输入框的disabled属性，允许用户输入；取消勾选时重新加上disabled属性，清空已输入的值。
2. 替换JS中所有错误的&写法，URL参数拼接优先使用原生URLSearchParams处理，避免手动拼接字符串带来的转义、格式错误问题。
3. 重构参数判断逻辑，每个参数单独判断增删，替代多层嵌套if，避免分支遗漏。
4. 删除复选框上无效的onsubmit事件绑定。

修复后完整代码 #

JS部分 #

// DOM加载完成后绑定复选框联动逻辑
document.addEventListener('DOMContentLoaded', function() {
  const userCheckbox = document.querySelector('input[name="user"]');
  const userNumInput = document.querySelector('input[name="userNum"]');

  userCheckbox.addEventListener('change', function() {
    if (this.checked) {
      userNumInput.disabled = false;
      userNumInput.focus();
    } else {
      userNumInput.disabled = true;
      userNumInput.value = '';
    }
  })
})

function goPBFour(event) {
  event.preventDefault();
  const formData = new FormData(event.target);
  // 基于当前已有URL参数初始化参数对象
  const searchParams = new URLSearchParams(location.search);

  // 逐个处理参数，无需嵌套判断
  // 吞吐量参数
  if (document.querySelector('input[name="throughput"]').checked) {
    searchParams.set('throughput', 'true');
  } else {
    searchParams.delete('throughput');
  }

  // 并发用户数参数
  const isUserTestChecked = document.querySelector('input[name="user"]').checked;
  if (isUserTestChecked) {
    const inputUserNum = formData.get('userNum');
    // 兜底默认值为2，避免空值/Null导致异常
    searchParams.set('userNum', inputUserNum || 2);
  } else {
    searchParams.delete('userNum');
  }

  // 连接效率参数
  if (document.querySelector('input[name="conEff"]').checked) {
    searchParams.set('conEff', 'true');
  } else {
    searchParams.delete('conEff');
  }

  // 统一生成URL跳转
  window.location.href = `evalportalb4.html?${searchParams.toString()}`;
}

HTML部分 #

<form id="myForm" onsubmit="goPBFour(event)" method="get">
  <div id="pBFContainer" class="container">
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <!-- 移除了复选框上无效的onsubmit绑定 -->
      <input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2"
        max="12" disabled required/> (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>

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