Переключатели-флажки checkbox

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Переключатели-флажки checkbox - это блочные HTML - элементы, которые получают свойство .checked при вызове функции VcorpJS.uCheckeds(...).

Плагин использует CSS-классы .pb_checked_true (для установленных флажков) и .pb_checked_false (для снятых флажков),
а так же .pb_ch1 ... .pb_ch8 для вложенных DIV с различными изображениями установленных флажков ( .pb_checked_true .pb_ch1 { ... } )
и классов .pb_chs1 ... .pb_chs8 для вложенных SPAN с различными стилями текста установленных флажков ( .pb_checked_true .pb_chs1 { ... } ).

.uCheckeds( [ handler ] , [ node ] , [ selector ] )

Функция производит поиск HTML-элементов с классами pb_checked_true и pb_checked_false,
и если у них нет свойства .checked типа boolean, то создаёт у найденных объектов свойство .checked,
создаёт обработчик клика для автоматической смены CSS-класса и свойства .checked ( true / false ).

node - ссылка на родительский HTML-объект или его текстовый id (в котором искать)
Если объект не указан или не найден, то document (VcorpJS.D).

selector - текстовый селектор для уточнения поиска HTML-объектов, вложенных в node,
работает примерно так: node.querySelectorAll( selector + " .pb_checked_true , " + selector + " .pb_checked_false" );
Селектор составляется по правилам CSS - имена классов пишутся с точкой, идентификаторы через решётку #, допустимы каскадные перечисления классов и т.д.

handler - общая callbak - функция, вызываемая при каждом клике по любому блочному объекту-флажку (см. правила для callback - функций).
Формат вызова: function( e ); где:

this - ссылка на HTML-объект класса pb_checked_true или pb_checked_false
e - объект event события click

Функция ничего не возвращает (undefined).

Функцию VcorpJS.uCheckeds() можно вызывать сколько угодно раз.
При каждом новом вызове, если указан handler, он принудительно меняется для всех, а не только найденных объектов-флажков.
При каждом вызове происходит новый поиск - согласно указанным node и selector,
если какой-либо блочный элемент найден и свойство .checked уже имеет тип boolean (было установлено), то ничего не происходит,
иначе свойство создаётся со значением согласно текущему CSS-классу блочного объекта и навешивается обработчик клика.

Визуальный пример создания и работы флажков checkbox

CSS-классы для плагина checkbox

<div class="pb_checked_true">
<div class="pb_ch1"></div><span class="pb_chs1">Флажок 1</span>
</div>
<div class="pb_checked_false">
<div class="pb_ch2"></div><span class="pb_chs2">Флажок 2</span>
</div>
<div class="pb_checked_true">
<div class="pb_ch3"></div><span class="pb_chs3">Флажок 3</span>
</div>
...
</div>
<div class="pb_checked_false">
<div class="pb_ch9"></div><span class="pb_chs9">Флажок 9</span>
</div>

<script type="text/javascript">
/* Инциализация флажков-переключателей */
VcorpJS.ready( function(e) { VcorpJS.uCheckeds(); } );
/* Или так тоже можно */
VcorpJS.ready( "VcorpJS.uCheckeds()" );
</script>

Флажок 1

Флажок 2

Флажок 3

Флажок 4

Флажок 5

Флажок 6

Флажок 7

Флажок 8

Флажок 9

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.