Вступление #

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

Установка #

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

    <div class="js-choice-group" aria-label="Тип архитектуры">
        <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-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({
		el: '.my-choice-group',
		value: 'Модернизм'
	});

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

disabled() #

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

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

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

enabled() #

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

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

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

clearAll() #

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

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

	// или

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

getValue() #

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

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

	// или

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

Значение, которое приходит в ответ, может быть двух видов:

• string — Для обычной группы;
• array — Для группы с множественным выбором.

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

	const myСhoiceGroup = document.querySelector(".my-choice-group")

	console.log(myСhoiceGroup.BasicСhoiceGroup) // пример экземпляра

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

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

choiceGroup:change #

Срабатывает при переключении дочерних элементов.

Параметры:

	const myChoiceGroup = document.querySelector('.my-choice-group')

	myChoiceGroup.addEventListener('choiceGroup:change', function() {

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

    }, false);