Как сделать селект с чекбоксами?

Question

[IIIu6ko]

Добрый день. Подскажите плагин или тип того, чтобы сделать селект, с чекбоксами внутри.
Про Bootstrap Multiselect знаю.

Answer 1

[Alex]

Готового плагина не подскажу, но я считаю что он вам и не нужен

Такого компонента нет, и он не очень функционален.
Селект предполагает выбор одного варианта из нескольких. При этом варианты выбора спрятаны, так как их может быть очень много.
А список чекбоксов — предполагает выбор нескольких, не всегда связанных между собой опций.

Если у вас вариантов выбора не много, то вам достаточно вывести просто группу чекбоксов. Если много — тогда используйте <select multiple>...</select> и позвольте системе самостоятельно отобразить UI для пользователя. Например на мобильных это будет поп-ап со списком из чекбоксов и кнопкой "Подтвердить".

Если использование встроенных компонентов для вас по каким-то причинам не возможно — тогда используйте список чекбоксов завернутый в <details> чтобы скрывать их.

Или, на самый крайний случай, самое, как по мне, костыльное решение — компонент dropdown + список чекбоксов в нем.

Comments

[IIIu6ko]

С details интересный вариант, попозже попробую.

[IIIu6ko]

Сделал с помощью details, всё замечательно работает. Я думаю можно даже анимировать сворачивание и разворачивание, но в моём случаи это не требуется.

[Alex]

IIIu6ko, Только учитывайте, что

1. Это не очень верно с точки зрения семантики
   
2. На android и iOS это куда менее удобно чем обычный <select multiple>...</select>
   

[IIIu6ko]

Alex, В данном случаи это админка, так что наплевать на семантику.

[Alex]

IIIu6ko,

На android и iOS это куда менее удобно чем обычный <select multiple>...</select>

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

[Alex]

IIIu6ko,

В данном случаи это админка, так что наплевать на семантику.

Если только для личного использования.

[IIIu6ko]

Alex, А зачем она нужна в админке?

[Alex]

IIIu6ko, Это прежде всего вопрос доступности. И если вы работаете над каким-либо интерфейсом и не можете заранее определить набор людей которые будут с ним взаимодействовать и каким именно способом — тогда о доступности нельзя забывать.

[IIIu6ko]

Alex, Я понял. Это песня Макеева, поддерживаю. Но не всегда есть возможность на нативных компонентах всё делать. Я бы и сам с радостью :)