Question

我有一个带有单选按钮的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;"/>

我需要在选中单选按钮后显示文本和输入字段，并在取消选中时隐藏它（检查其他内容）。

这是我到目前为止的JavaScript：

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

这＆＃34;取消隐藏＆＃34;代码块但一旦取消选择就不会隐藏它。如果有人有解决方案，我会很感激。

谢谢。

Answer 1

您需要在选择下一个字段的前一个字段中将显示类型设置为无。我添加了一个代码片段，您可以在其中进行验证。但是，我建议采用更好的方法：

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

function openUniversity() {
    document.getElementById("uniquestion").style.display = "inline";
    document.getElementById("unifield").style.display = "block";
    
    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";
    
    document.getElementById("uniquestion").style.display = "none";
    document.getElementById("unifield").style.display = "none";
}

<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;"/>

Answer 2

您需要对两个功能进行一些修改：

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";
}

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

2 个答案: