表单点击显示/隐藏功能Bug求助：选学生+图书馆用户时异常

问题核心 #

当前代码的关键问题是状态联动不完整：

• 切换「Designation」时，未重置「Library User?」的选中状态，也未同步更新「Library Card Id」的显示状态
• 若用户先选「Student」→「Library User?=Yes」（此时显示id_74），再切换到「Staff」后切回「Student」，「Library User?」的选中状态仍为Yes，但id_74不会自动同步显示，引发异常

修复后的代码 #

JavaScript 部分

// 处理职称切换逻辑
function handleDesignationChange(isStudent) {
  const staffIdField = document.getElementById("id_73");
  const matricNumField = document.getElementById("id_80");
  const libraryUserField = document.getElementById("id_70");
  const libraryCardField = document.getElementById("id_74");

  if (!isStudent) {
    // 选择Staff时的状态
    staffIdField.style.display = "block";
    matricNumField.style.display = "none";
    libraryUserField.style.display = "none";
    libraryCardField.style.display = "none";
    // 重置图书馆用户选项，避免残留状态
    document.getElementById("input_70_0").checked = false;
    document.getElementById("input_70_1").checked = false;
  } else {
    // 选择Student时的状态
    staffIdField.style.display = "none";
    matricNumField.style.display = "block";
    libraryUserField.style.display = "block";
    // 根据当前图书馆用户选项，同步卡片显示状态
    const isLibraryUser = document.getElementById("input_70_0").checked;
    libraryCardField.style.display = isLibraryUser ? "block" : "none";
  }
}

// 处理图书馆用户切换逻辑
function handleLibraryUserChange(isYes) {
  const libraryCardField = document.getElementById("id_74");
  libraryCardField.style.display = isYes ? "block" : "none";
}

HTML 事件绑定修改（仅需替换对应radio的onclick属性）

<!-- Staff选项 -->
<input type="radio" aria-describedby="label_68" class="form-radio validate[required]" id="input_68_0" name="q68_typeA68" value="staff" required="" onclick="handleDesignationChange(false)"/>
<label id="label_input_68_0" for="input_68_0">Staff</label>

<!-- Student选项 -->
<input type="radio" aria-describedby="label_68" class="form-radio validate[required]" id="input_68_1" name="q68_typeA68" value="student" required="" onclick="handleDesignationChange(true)"/>
<label id="label_input_68_1" for="input_68_1">Student</label>

<!-- Library User Yes选项 -->
<input type="radio" aria-describedby="label_70" class="form-radio validate[required]" id="input_70_0" name="q70_typeA70" value="yes" required="" onclick="handleLibraryUserChange(true)"/>
<label id="label_input_70_0" for="input_70_0">Yes</label>

<!-- Library User No选项 -->
<input type="radio" aria-describedby="label_70" class="form-radio validate[required]" id="input_70_1" name="q70_typeA70" value="No" required="" onclick="handleLibraryUserChange(false)"/>
<label id="label_input_70_1" for="input_70_1">No</label>

关键修改说明 #

1. 语义化函数命名：替换模糊的myFunction为handleDesignationChange、handleLibraryUserChange，便于后续维护
2. 状态重置逻辑：切换到Staff时，强制清空「Library User?」的选中状态并隐藏「Library Card Id」，彻底避免残留状态干扰
3. 联动同步处理：切回Student时，自动检测当前「Library User?」的选中状态，同步更新「Library Card Id」的显示状态
4. 逻辑简化：统一字段获取逻辑，减少重复代码，提升可读性

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