показать/скрыть переключатель

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>