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>

显示/隐藏开关

2 个答案: