javascript - 显示/隐藏开关

Question

我有以下代码

<input type='radio' name='showhide'></input><input type='radio' name='showhide'></input>
<br/>
<label> Some tips here!</label>

我的要求是，当单选按钮改变时，下面的标签将显示或隐藏。实现起来很容易，但我的问题是，标签的显示或隐藏都会改变整个页面的布局。我认为这是因为标签中的文本比单选按钮中的文本长。那我应该怎么做才能防止页面布局发生变化呢？提前致谢!

Answer 1

首先，没有</input> .另一件事是您没有为输入赋予值(value)。

<input type='radio' name='showhide' value="true" />
<input type='radio' name='showhide' value="false" />

现在，对于交互，给出 ID到 <label> .

<label id="tips"> Some tips here!</label>

使用 JavaScript，您可以这样做:

<input type='radio' name='showhide' onclick="document.getElementById('tips').style.visibility='visible'" value="true" />
<input type='radio' name='showhide' onclick="document.getElementById('tips').style.visibility='hidden'" value="false" />