使用单选按钮隐藏和显示文本输入

可以通过以下步骤完成：

创建单选按钮：使用HTML和CSS创建单选按钮，可以使用<input type="radio">元素来创建单选按钮，并使用label元素进行标签化。确保为每个单选按钮设置不同的value属性值，并使用相同的name属性将它们分组。
创建文本输入框：使用HTML创建文本输入框，可以使用<input type="text">元素来创建文本输入框。设置一个唯一的id属性，以便在后续步骤中操作该元素。
添加JavaScript代码：使用JavaScript代码来监听单选按钮的选中状态，并根据选择的状态来隐藏或显示文本输入框。可以使用事件监听器（例如click事件）来检测单选按钮状态的变化。
在事件监听器中更新文本输入框的样式：根据单选按钮的选中状态，在事件监听器中更新文本输入框的display属性。当单选按钮选中时，将文本输入框的display属性设置为"block"以显示它，当单选按钮未选中时，将display属性设置为"none"以隐藏它。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <input type="radio" name="visibility" value="show" id="showRadio">
  <label for="showRadio">显示文本输入</label>
  <input type="radio" name="visibility" value="hide" id="hideRadio">
  <label for="hideRadio">隐藏文本输入</label>

  <br>

  <input type="text" id="textInput" class="hidden">

  <script>
    const showRadio = document.getElementById("showRadio");
    const hideRadio = document.getElementById("hideRadio");
    const textInput = document.getElementById("textInput");

    showRadio.addEventListener("click", function() {
      textInput.classList.remove("hidden");
    });

    hideRadio.addEventListener("click", function() {
      textInput.classList.add("hidden");
    });
  </script>
</body>
</html>

在这个示例中，当选中"显示文本输入"单选按钮时，文本输入框将显示出来；当选中"隐藏文本输入"单选按钮时，文本输入框将被隐藏起来。通过添加和移除名为"hidden"的CSS类来控制文本输入框的显示和隐藏。