使用JavaScript在单选按钮上触发/取消触发事件

我有一个带有单选按钮的HTML表单

<input type="radio" name="quiz" value="University" onclick="openUniversity()">University<br>
<p id="uniquestion" style="display: none;">Please tell us your University:</p>
<input id="unifield" type="text" name="uniquestion" style="display: none;"/>
<input type="radio" name="quiz" value="Other" onclick="openOther()">Other<br>
<p id="othquestion" style="display: none;">Please specify source:</p>
<input id="othfield" type="text" name="othquestion" style="display: none;"/>

这将取消隐藏代码块，但在取消选择后不会隐藏它。 如果有人有解决办法，我会很感激的

---

谢谢。

您需要在“选择下一个”字段的上一个字段中将“显示类型”设置为“无”。我添加了一个代码段，您可以在其中验证相同的代码。不过，我建议采取更好的办法：

使用onChange属性仅调用1个函数进行无线电更改，然后使用e.target.value获取当前选定的值。然后显示所需的字段，并递归地为所有其他字段设置display:none

功能开放大学{ document.getElementByIduniquestion.style.display=inline； document.getElementByIdunifield.style.display=block； document.getElementByIdothquestion.style.display=none； document.getElementByIdothfield.style.display=none； } 函数openOther{ document.getElementByIdothquestion.style.display=inline； document.getElementByIdothfield.style.display=block； document.getElementByIduniquestion.style.display=none； document.getElementByIdunifield.style.display=none； } 大学

请告诉我们你们的大学：

另外

请指定来源：

---

您需要对两个函数进行一些修改：

function openUniversity() {
    document.getElementById("uniquestion").style.display = "inline";
    document.getElementById("unifield").style.display = "block";


    // Added to hide other...
    document.getElementById("othquestion").style.display = "none";
    document.getElementById("othfield").style.display = "none";
}

function openOther() {
    document.getElementById("othquestion").style.display = "inline";
    document.getElementById("othfield").style.display = "block";


    // Added to hide uni...
    document.getElementById("uniquestion").style.display = "none";
    document.getElementById("unifield").style.display = "none";
}

function openUniversity() {
    document.getElementById("uniquestion").style.display = "inline";
    document.getElementById("unifield").style.display = "block";


    // Added to hide other...
    document.getElementById("othquestion").style.display = "none";
    document.getElementById("othfield").style.display = "none";
}

function openOther() {
    document.getElementById("othquestion").style.display = "inline";
    document.getElementById("othfield").style.display = "block";


    // Added to hide uni...
    document.getElementById("uniquestion").style.display = "none";
    document.getElementById("unifield").style.display = "none";
}