如何通过HTML单选按钮的选择控制div元素的显示与隐藏？

我来帮你搞定这个需求，先梳理下你原代码里的几个小问题，再给你完整的可运行方案：

原代码的问题点 #

• 两个单选按钮的value都设成了cheque，完全没法区分「现金」和「支票」选项
• <div>里直接嵌套<tr>不符合HTML规范，表格行必须放在<table>容器里
• 事件绑定的思路是对的，但逻辑需要匹配不同选项的判断

修正后的完整代码 #

HTML结构（规范且交互友好）

<!-- 单选按钮组，用label包裹提升点击体验 -->
<label>
  <input value="cash" type="radio" name="selector" onclick="displayForm(this)">
  Cash
</label>
<label style="margin-left: 15px;">
  <input value="cheque" type="radio" name="selector" onclick="displayForm(this)">
  Cheque
</label>

<!-- 支票表单容器，初始隐藏 -->
<div id="chequeContainer" class="chequeContainer" style="display:none;">
  <table>
    <tr>
      <td>Bank Name:</td>
      <td><input type="text" name="bank" placeholder="Enter bank name"></td>
    </tr>
    <tr>
      <td>Cheque Number:</td>
      <td><input type="text" name="chequeNumber" placeholder="Enter cheque number"></td>
    </tr>
  </table>
</div>

JavaScript逻辑（简洁清晰）

function displayForm(radio) {
  const chequeForm = document.getElementById('chequeContainer');
  // 根据选中的单选按钮值，切换容器的显示状态
  chequeForm.style.display = radio.value === 'cheque' ? 'block' : 'none';
}

可选CSS美化（提升视觉体验）

.chequeContainer {
  margin-top: 15px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #f9f9f9;
}

.chequeContainer table {
  border-collapse: separate;
  border-spacing: 8px;
}

.chequeContainer input {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

核心逻辑说明 #

1. 给每个单选按钮设置唯一的value值（cash和cheque），这样能准确判断用户的选择
2. 用<label>包裹单选按钮和文字，用户点击文字也能选中按钮，交互更友好
3. JavaScript函数通过传入的单选按钮对象，直接获取其value，然后切换目标div的display属性
4. 修正了HTML结构，把表格行放到了<table>里，符合W3C规范

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