Вступление #

Группа с возможностью выбора одного или нескольких элементов.
Для работы можно использовать класс .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,
)