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

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

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

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

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

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

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

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

    Результат:

  2. itstime

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

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

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


Вас может еще заинтересовать список тем : #JS | #CLICK | #CHECKBOX |
Последняя дата редактирования : 2020-02-12 11:01
Теги:
Нажать чекбокс показать полеНажать чекбокс показатьНажать чекбокс скрыть полеотжать чекбокс показать поле

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020