О web-разработке
и даже немного больше...

JavaScript: «Отметить всё»

checkboxПростой и полезный код на JavaScript.
Давайте рассмотрим форму, на которой содержится большое количество флажков (checkbox-ы), и необходимо активировать все эти флажки.
Активировать / Деактивировать все в ручную может занять определенное время, да и не совсем удобно.
Неплохо было бы завести ещё одно поле, которое бы могло выполнить это действие одним нажатием. В общем, суть работы этого скрипта сводиться именно к этому.

Вставляем на страницу следующий код:

<script type="text/javascript">
function select_all (num, prefix, mark){
	for (var i = 0; i &lt;= num; i++)
		document.getElementById ( prefix + i ).checked = mark;
}
</script>

В функцию select_all передаем следующие переменные:
num — суммарное количество флажков;
prefix — общий префикс для id флажков;
mark — значение ключевого флажка (true / false);

Код формы:

<form action="" method="POST"  name="InpList">
<fieldset>
<label><input name="SelAll"  type="checkbox"
onclick="select_all(6,'Elem',document.InpList.SelAll.checked)"> Отметить все</label><br>

<label><input type='checkbox' id='Elem0'> Почта</label><br>
<label><input type='checkbox' id='Elem1'> Форум</label><br>
<label><input type='checkbox' id='Elem2'> Блог Yornet</label><br>
<label><input type='checkbox' id='Elem3'> Рассылка</label><br>
<label><input type='checkbox' id='Elem4'> Медиафайлы</label><br>
<label><input type='checkbox' id='Elem5'> Контакты</label><br>

</fieldset>
</form>

В данном примере поле с именем «SelAll» является ключевым. Активируя/деактивируя его мы запускаем функцию select_all, которая дублирует значение ключевого поля на все поля с префиксом Elem, c кодом num от 0 до 6. В итоге мы получаем то, что и задумали.

Кстати, так же иногда при большом количестве элементов на форме удобно сделать список чекбоксов с прокруткой. Реализовать это не составляет большого труда, и в этом вы можете убедиться сами.

Опубликован: 11.01.2013 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта