javascript - 使用 javascript 切换表的主体

Question

<div>
  <input type="radio" name="check" value="cash" checked/>cash
  <input type="radio" name="check" value="credit" />credit
</div>

<table>
  <tbody id="cash">
    <tr>
      <td>
        Cash User name:
      </td>

      <td>
        <input type="text" name="cash1" />
      </td>

    </tr>
  </tbody>

  <tbody id="credit">
    <tr>
      <td>
        credit User name:
      </td>
      <td>
        <input type="text" name="credit1" />
      </td>
    </tr>
  </tbody>
</table>

在 div 标签中我有两个单选按钮。默认情况下，我现在选中了名为 cash 的单选按钮。我想要的是，当单选按钮现金被选中时，显示带有 id cash 的 tbody 和带有 id credit 的 tbody 隐藏，当选中带有名称 credit 的单选按钮时，带有 id 的 tbody credit 显示，其他主体隐藏。我用 jQuery 完成了它，但我希望它用 Javascript 完成。

Answer 1

如果您愿意寻求纯 CSS 解决方案，那么您必须摆脱 radio 按钮周围的 div

Demo

tbody {
    display: none;
}

input[value="cash"]:checked + input[value="credit"] + table tbody[id="cash"] {
    display: table-row-group;
}

input[value="credit"]:checked + table tbody[id="credit"] {
    display: table-row-group;
}

Note: Just make sure you declare some class and make these selectors specific, else it will target all the elements in the above combination in the document.