单选按钮控制输入框显隐及标签文本修改问题求助

问题原因 #

• 代码未给两个单选按钮绑定change事件，切换选项时不会触发执行你写的判断逻辑
• 未在else分支中处理第一个输入框标签的恢复逻辑，切回第一个单选选项时标签不会变回「Höhe」

修复后完整代码 #

<!-- 单选按钮部分添加onchange事件绑定 -->
<label>Fix Höhe
  <input type="radio" name="verlegeart" onchange="adjustableHeightCheck()" checked>
</label>

<label>Verstellbare Höhe
  <input type="radio" name="verlegeart" id="adjustableHeight" onchange="adjustableHeightCheck()">
</label>

<br>

<label>
  <p id="height">Höhe</p>
  <input type="number">
</label>

<div id="max-height" style="display: none">
  <label>
    <p>Höchste Höhe in mm</p>
    <input type="number">
  </label>
</div>

<script>
function adjustableHeightCheck() {
  if (document.getElementById("adjustableHeight").checked) {
    document.getElementById("max-height").style.display = "block";
    document.getElementById("height").innerHTML = "Niedrigste Höhe in mm";
  } else {
    document.getElementById("max-height").style.display = "none";
    // 新增标签恢复逻辑
    document.getElementById("height").innerHTML = "Höhe";
  }
}
</script>

修改点说明 #

• 给两个单选按钮都添加了onchange="adjustableHeightCheck()"，切换选项时自动触发逻辑执行
• 给默认选中的第一个单选按钮加了checked属性，保证初始状态符合预期
• 在else分支中新增了第一个输入框标签恢复为「Höhe」的逻辑

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