我需要根据用户 radio 标签显示额外的输入标签。我在这里粘贴了工作代码。我想显示配偶的名字和姓氏输入标签。如果不是，则必须显示父亲和母亲的名字和姓氏。但问题是，我看到两者之间存在差距，这是我不想要的。有帮助吗？
<!DOCTYPE html>
<html>
<head>
<script>
function check() {
if (document.getElementById('Married').checked)
{
document.getElementById('ifYes').style.visibility = 'visible';
}
else
document.getElementById('ifYes').style.visibility = 'hidden';
}
</script>
<form>
First Name <input type="text" id="UserFirstName" value="Your First Name">
Last Name <input type="text" id="UserLastName" value="Your Last Name"></br></br>
Marital Status <input type="radio" id="Married" name="MarStatus" onclick="javascript:check();" >Married <input type="radio" id="UnMarried" name="MarStatus" onclick="javascript:check();">UnMarried </br></br>
<div id="ifYes" style="visibility:hidden">
Spouse First Name <input type="text" id="SpouseFirstName" value="Spouse First Name">
Last Name <input type="text" id="SpouseLastName" value="Spouse Last Name"></br></br>
</div>
Father First Name <input type="text" id="FatherFirstName" value="Father First Name"> Last Name <input type="text" id="FatherLastName" value="Father Last Name"></br></br>
Mother First Name <input type="text" id="FatherFirstName" value="Mother First Name"> Last Name <input type="text" id="FatherLastName" value="Mother Last Name"></br>
</br>
<button onclick="window.location.href='b.php'">Submit</button>
</form>
</body>
</html>最佳答案
visibility:hiddenwill keep the element in the page and occupies that space but does not show to the user.
display:nonewill not be available in the page and does not occupy any space.
你应该使用 display:none .
你也在使用 </br>错了，应该是<br/>或者简单地 <br> .虽然我建议你不要使用它。相反，您可以使用 div 包装相关信息元素并使用 css 设置样式(margin 属性)。
另一个问题是您应该在单选按钮中使用 value 属性，您可以根据该属性在函数内设置样式。
尝试以下方式:
<script>
function check(el) {
if (el.value == "Married") {
document.getElementById('ifYes').style.display = 'block';
}
else
document.getElementById('ifYes').style.display = 'none';
}
</script>
<form>
<div style="margin-bottom:20px;">
First Name <input type="text" id="UserFirstName" value="Your First Name">
Last Name <input type="text" id="UserLastName" value="Your Last Name">
</div>
<div style="margin-bottom:20px;">
Marital Status <input type="radio" value="Married" name="MarStatus" onclick="javascript:check(this);" >Married <input type="radio" value="UnMarried" name="MarStatus" onclick="javascript:check(this);">UnMarried
</div>
<div id="ifYes" style="display:none; margin-bottom:20px;">
Spouse First Name <input type="text" id="SpouseFirstName" value="Spouse First Name">
Last Name <input type="text" id="SpouseLastName" value="Spouse Last Name">
</div>
<div style="margin-bottom:20px;">
Father First Name <input type="text" id="FatherFirstName" value="Father First Name"> Last Name <input type="text" id="FatherLastName" value="Father Last Name">
</div>
<div style="margin-bottom:20px;">
Mother First Name <input type="text" id="FatherFirstName" value="Mother First Name"> Last Name <input type="text" id="FatherLastName" value="Mother Last Name">
</div>
<button onclick="window.location.href='b.php'">Submit</button>
</form>关于javascript - 如何消除输入标签之间的差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59850925/