Показ определенных блоков при изменении формы

Частенько при изменении элементов формы, нужно показать другие ее элементы или вывести текстовую информацию.

В данной теме показаны примеры на jQuery для показа ранее скрытых блоков при выбранном значении radio, checkbox и select

Обратите внимание: все стили кнопок в данных примерах - это стили сайта и в примерах их нет

Вывод блока при изменении RADIO

Для кнопок radio может быть выбрано только одно значение. Соотв. при изменении выбора мы прячем все блоки и показываем блок с ID равным значению value кнопки.

Если нет возможности привязать блок к value, например, если оно несет в себе много текстовой информации, можно по аналогии использовать любой data-атрибут.

Вывод блока при изменении CHECKBOX

С кнопками checkbox может быть масса различных вариантов, например, показать блок при выбранных 2-х конкретных или сделать одни неактивными, когда выбраны другие и т.д.

В примере сделано как и в предыдущем варианте, а именно, активный чекбокс = показанный блок с его значением value

Вывод блока при изменении SELECT

Вариант практически точно такой же, как с кнопками radio.

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!