无法通过JavaScript取消<input>复选框选中状态的技术求助

你的核心问题是所有复选框重复使用了同一个id="checkbox"——HTML规范要求id必须唯一，这会导致getElementById只能获取到第一个复选框，其余复选框根本不会被处理。另外，操作复选框选中状态的正确方式是设置checked布尔属性，而非移除checked属性。

修复步骤 #

1. 统一复选框的选择标识（替换重复id） #

把所有复选框的id改为唯一值，或者给它们添加同一个class来批量选择。推荐用class，比如class="photoshoot-checkbox"：

修改后的HTML复选框部分：

<div>
  <input type="checkbox" class="photoshoot-checkbox">
  <label>Regular photoshoot</label>
</div>

<div>
  <input type="checkbox" class="photoshoot-checkbox">
  <label>Nature/Outdoors</label>
</div>

<div>
  <input type="checkbox" class="photoshoot-checkbox">
  <label>Wedding</label>
</div>

<div>
  <input type="checkbox" class="photoshoot-checkbox">
  <label>senior photoshoot</label>
</div>

<div>
  <input type="checkbox" class="photoshoot-checkbox">
  <label>Family photoshoot</label>
</div>

<div>
  <input type="checkbox" class="photoshoot-checkbox">
  <label>Pets/Animals</label>
</div>

2. 修改eraseText函数（原生JS方案） #

用document.querySelectorAll选中所有带目标class的复选框，遍历设置checked = false：

function eraseText() {
  // 清空输入框
  document.getElementById("output1").value = "";
  document.getElementById("output2").value = "";

  // 取消所有复选框选中状态
  const checkboxes = document.querySelectorAll(".photoshoot-checkbox");
  checkboxes.forEach(checkbox => {
    checkbox.checked = false;
  });
}

3. jQuery方案（如果需要） #

之前jQuery无效也是因为重复id的问题，修复后用以下代码即可：

function eraseText() {
  $("#output1, #output2").val("");
  $(".photoshoot-checkbox").prop("checked", false);
}

注意要用prop()而非attr()操作复选框状态，因为checked是DOM元素的布尔属性，prop()能正确处理其状态。

额外提示 #

• 不要重复使用id，这是HTML基础规范，会导致各类选择器失效。
• 操作表单控件状态时，优先使用元素的属性（如checked、value）而非修改HTML属性。

内容的提问来源于stack exchange，提问作者Alex m.