如何将文本输入与复选框值通过URL传递给fetch请求生成密码？

问题根源 #

你的代码存在两个核心问题：

1. 错误赋值覆盖复选框状态：JS中使用document.getElementById("number").value = "True"这类赋值语句，会强制将复选框的value设为固定值，完全忽略用户是否勾选的实际状态。
2. 参数格式不匹配接口要求：目标接口需要小写的true/false参数值，你代码里用了大写的"True"，同时HTML里的复选框value存在拼写错误（ture→true）。

修正后的代码 #

HTML部分（修正拼写错误）

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" id="number" value="true">Numbers
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" id="character" value="true"> Special characters
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" id="uppercase" value="true">Uppercase
  </label>
</div>
<div class="passwordbox">
  <input id="passlen" class="pass-len-box" placeholder="Enter password length">
  <button class="generatorPass" id="genratorPass">Generate</button>
  <br>
  <p id="dispPassword"></p>
</div>

JavaScript部分（修复复选框状态获取逻辑）

document.querySelector("#genratorPass").addEventListener("click", () => {
  // 获取密码长度输入值
  const passLen = document.querySelector("#passlen").value;
  // 获取各复选框的勾选状态，转成接口需要的小写字符串
  const includeNumbers = document.getElementById("number").checked.toString();
  const includeChars = document.getElementById("character").checked.toString();
  const includeUppercase = document.getElementById("uppercase").checked.toString();
  
  request(passLen, includeNumbers, includeChars, includeUppercase);
});

const dispPasswordEl = document.getElementById("dispPassword");

function request(len, num, char, caps) {
  // 拼接符合接口要求的URL
  const url = `https://passwordinator.herokuapp.com?len=${len}&num=${num}&char=${char}&caps=${caps}`;
  fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log(data.data);
      dispPasswordEl.textContent = data.data;
    })
    .catch(err => console.error("请求失败:", err)); // 增加错误处理
}

关键优化点 #

• 改用checked属性判断复选框是否被勾选，不再强制设置value
• 将布尔值转成小写字符串true/false，完全匹配接口参数要求
• 增加错误处理，避免请求失败时无提示
• 优化变量命名，提升代码可读性

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