Вступление #

Группа, где можно выбрать один из элементов.
Для работы группы, можно использовать по умолчанию класс .js-choice-group и специальную разметку.

Установка #

Пример разметки и инициализации группы элементов.

    <div class="js-choice-group" aria-label="Тип архитектуры">
        <!--
            Чтобы заранее выделить активный элемент,
            на триггер необходимо навесить aria-checked="true".
        -->
        <button class="choice-group-item" type="button" aria-checked="true" data-choice-group-value="Модерн">Модерн</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Модернизм">Модернизм</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Конструктивизм">Конструктивизм</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Постмодернизм">Постмодернизм</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Хай-тек">Хай-тек</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Деконструктивизм">Деконструктивизм</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Параметризм">Параметризм</button>
    </div>

    BasicChoiceGroup.init('.my-choice-group');
    BasicChoiceGroup.init(document.querySelector('.my-choice-group'));
    BasicChoiceGroup.init(document.querySelectorAll('.my-choice-group'));

    // или

    BasicChoiceGroup.init(); // по умолчанию инициaлизирует элементы с классом .js-choice-group

Множественный выбор #

Для работы множественного выбора, необходимо использовать data-атрибут data-choice-group-type со значением multiple.

    <div class="js-choice-group" data-choice-group-type="multiple" aria-label="Тип архитектуры">
        <button class="choice-group-item" type="button" aria-checked="true" data-choice-group-value="Модерн">Модерн</button>
        <button class="choice-group-item" type="button" aria-checked="true" data-choice-group-value="Модернизм">Модернизм</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Конструктивизм">Конструктивизм</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Постмодернизм">Постмодернизм</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Хай-тек">Хай-тек</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Деконструктивизм">Деконструктивизм</button>
        <button class="choice-group-item" type="button" data-choice-group-value="Параметризм">Параметризм</button>
    </div>

Методы #

selected() #

Выбрать элемент из группы.

	BasicChoiceGroup.selected({
		group: '.my-choice-group',
		value: 'Модернизм'
	});

где в конфигурациях указывается:

disabled() #

Заблокировать элемент группы, невозможно будет с ним взаимодействовать.

	BasicChoiceGroup.disabled({
		group: '.my-choice-group',
		value: 'Модернизм'
	});

где в конфигурациях указывается:

enabled() #

Разблокировать элемент группы.

	BasicChoiceGroup.enabled({
		group: '.my-choice-group',
		value: 'Модернизм'
	});

где в конфигурациях указывается:

clearAll() #

Полностью очистить группу от выбора.

	BasicChoiceGroup.clearAll('.my-choice-group');

	// или

	BasicChoiceGroup.clearAll(document.querySelector('.my-choice-group'));

value() #

Получить значение группы.

	BasicChoiceGroup.value('.my-choice-group');

	// или

	BasicChoiceGroup.value(document.querySelector('.my-choice-group'));

Само значение имеет два вида: string для обычной группы и array для группы с множественным выбором.

Прослушивание событий #

Можно прослушать события элемента и получить необходимые параметры.

choiceGroup selected #

Срабатывает при выборе элемента из группы.

Параметры:

    document.querySelector('.my-choice-group').addEventListener('choiceGroup selected', function() {

        console.log(event.detail); // параметры

    }, false);