javascript - 显示/隐藏开关

Question

我有以下代码

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

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

Answer 1

首先，没有</input>. 另一件事是你没有给输入赋值。

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

Answer 2

使用 CSS 可见性

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

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