Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

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

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

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

    Результат:

  2. Показать/скрыть поле при нажатии на кнопку 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">

    Результат:

  3. Показать/скрыть поле при нажатии на кнопку 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;">

    Результат:

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

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

  5. Показать пароль по нажатию 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"


Вас может еще заинтересовать список тем : #JS | #CLICK | #CHECKBOX |
Последняя дата редактирования : 22.01.2021 13:33
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Нажать чекбокс показать поле Нажать чекбокс показать Нажать чекбокс скрыть поле отжать чекбокс показать поле

Последние комментарии :
Марат :
19/01/2021 01:13
Всегда пожалуйста!Приходите ещё!
подробнее.
аркадий :
19/01/2021 01:08
Спасибо!Меню вернулось. Класс!
подробнее.
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.