Как открыть поле после нажатия на checkbox примеры

У нас есть кнопка checkbox, по нажатию на которую требуется показать поле. По второму нажатию скрыть поле. Мне требуется, чтобы был чекбокс и несколько вариаций реакции на нажатие или же отключение кнопки чекбокс. Например, нажать по чекбоксу и показалось поле ввода… Такая задачка встречается периодически в javascript

Нажать кнопку checkbox показать/скрыть поле пример

1. Скрыть поле нажав на кнопку checkbox
2. Показать/скрыть поле при нажатии на кнопку checkbox
3. Показать/скрыть поле при нажатии на кнопку checkbox 2 пример
4. Еще + показать/скрыть поле при нажатии
5. Показать пароль по нажатию checkbox

Скрыть поле нажав на кнопку checkbox

Первый пример, предположим, что у нас есть поле, которое нужно скрыть по нажатию на кнопку checkbox

При нажатии скрывается поле и из чекбокса убирается галочка и прячется поле ввода информации.

<input type="checkbox" checked="checked"  onclick="this.nextSibling.style.display=this.checked_1?'':'none';"><input type="text">

Результат:




Показать/скрыть поле при нажатии на кнопку checkbox

Но нам, например, требуется чтобы при одном нажатии поле показывалось, а при другом скрывалось?

<input type="checkbox" checked="checked" onclick="if(this.checked){this.nextSibling.style.display=''}else {this.nextSibling.style.display='none';  this.nextSibling.value='';}"><input type="text">

Результат:




Показать/скрыть поле при нажатии на кнопку checkbox 2 пример

Но, что если вам требуется, чтобы кнопка checkbox по умолчанию была отжата!? Берем предыдущий вариант и просто убираем:

checked="checked"

Код в сборе:

<input type="checkbox"  onclick="if(this.checked){this.nextSibling.style.display=''}else {this.nextSibling.style.display='none';  this.nextSibling.value='';}"><input type="text" style="display:none;">

Результат:




Еще + показать/скрыть поле при нажатии

Не стал расписывать огромное количество возможных вариантов, как можно сделать onclick + еще делали пару страниц, на тему открытия закрытия различных полей, какие только существуют в природе!

Эта страница была сделана на заре, когда я только начинал изучать js и ситуация показать поле после нажатия checkbox и сам скрипт, какзались мне тогда фантастичными, что я сам смог это написать! Сейчас конечно же это довольно забавно! []




Показать пароль по нажатию checkbox

Для того, чтобы показать пароль по нажатию на checkbox нам понадобится:

input - выбираем type password

<input type="password" id="password">

Нам понадобится кнопка пусть это будет button, чтобы могли увидеть, как показ пароля по нажатию на checkbox

<button id="idbutton">Измени по нажатию checkbox</button>

Еще нам понадобится javascript :

<script>
idbutton.onclick = function()
{
  if(password.type=="text")
  password.type="password";
  else
  password.type="text";
}
</script>


Вы можете протестировать - "Показать пароль по нажатию checkbox"

Измени по нажатию checkbox