Html multiple select with checkbox

Multi-select Dropdown List with Checkbox using jQuery

Multiselect dropdown is very useful to allow the user to select multiple options in a selectbox. Multiple selections of the dropdown list can be added by using multiple attribute in the < select >tag. But in this case, multiple options can be selected by holding down the control (ctrl) button of the keyboard. Instead of using the multiple attributes in HTML, you can use jQuery to make the multi-select dropdown more user-friendly and add the checkbox to each option in the multi-select dropdown.

jQuery MultiSelect is a jquery plugin that turns a multiselect list into a nice and easy-to-use dropdown list with checkboxes. This plugin is the easiest way to change the interface of native select box elements and create multi select box with the checkbox. In this tutorial, we will show you how to convert HTML multi-select drop-down and integrate multiple select or multi-select dropdown list with checkbox using jQuery.

jQuery MultiSelect Plugin

We will use the MultiSelect Plugin to implement multiselect dropdown with checkbox in jQuery. In order to implement a multi-select dropdown list with checkboxes, you need to include the plugin library files.

Include the jQuery library and the JS & CSS library of the jQuery MultiSelect plugin.

 script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> script> script src="multiselect/jquery.multiselect.js"> script> link rel="stylesheet" href="multiselect/jquery.multiselect.css">

Create Dropdown List / Select Box with HTML

The < select >element creates a drop-down list and < option >tags define the available options in this list. The multiple attribute allow selecting multiple options in the select box.

select name="langOpt[]" multiple id="langOpt"> option value="C++">C++ option> option value="C#">C# option> option value="Java">Java option> option value="Objective-C">Objective-C option> option value="JavaScript">JavaScript option> option value="Perl">Perl option> option value="PHP">PHP option> option value="Ruby on Rails">Ruby on Rails option> option value="Android">Android option> option value="iOS">iOS option> option value="HTML">HTML option> option value="XML">XML option> select>

Add Checkboxes to Multi-select Drop-down List

Call the multiselect() method to initialize MultiSelect plugin.

$('select[multiple]').multiselect();

jQuery MultiSelect plugin provides various options to customize and enhance the multi-select dropdown functionality. Some mostly used multi-select dropdown example code snippets are given below.

jQuery MultiSelect with Checkboxes:
The following code adds checkboxes to options in multiselect dropdown.

$('#langOpt').multiselect(< columns: 1, placeholder: 'Select Languages' >);

jQuery MultiSelect With Search Option:
The following code enables the search/filtering on options in multiselect dropdown.

$('#langOpt').multiselect(< columns: 1, placeholder: 'Select Languages', search: true >);

jQuery MultiSelect With Select All Option:
The following code adds select all text to options list in multiselect dropdown. It allows to check/uncheck all options at once.

$('#langOpt').multiselect(< columns: 1, placeholder: 'Select Languages', search: true, selectAll: true >);

jQuery MultiSelect With Optgroup:
The following code adds checkboxes to options group ( < optgroup >) in multiselect dropdown.

$('#langOptgroup').multiselect(< columns: 4, placeholder: 'Select Languages', search: true, selectAll: true >);

Get Selected Options Value using PHP

When the multiple checkboxes value is submitted via an HTML form, you can retrieve the selected options value through normal GET or POST methods. The following code shows how you can get multiple selected values of the select box using the $_POST method in PHP.

$selectedOptions = $_POST['langOpt'];

Are you want to get implementation help, or modify or enhance the functionality of this script? Click Here to Submit Service Request

If you have any questions about this script, submit it to our QA community — Ask Question

Источник

Дизайнерский Multiselect на протеинах

Те из верстальщиков кто часто клепает формы регистрации или обратной связи обязательно столкнутся с задачей по выводу множественного выбора результатов — multiselect. К сожалению, не все элементы тега все ещё можно из коробки стилизовать по желанию дизайнера. В этом маленьком уроке я хотел бы поделиться своим опытом решения данной проблемы на базе знания CSS и немного ванильного JS.

Что не так с нативным select ?

Если дизайнер вам нарисовал красивый на 10-15 возможных вариантов выбора вы скорее всего придете к решению взять первую попавшуюся, похожую на дизайн, библиотеку из гугла (на что я надеялся). Личная боль в этом вопросе была связана с тем что в проекте нельзя было использовать сторонних библиотек, например jQuery, что очень сократило количество предложенных вариантов.

От малого к великому

Ну что ж приступим к написания простого множественного выбора для формы:

 
 
Your technology 
Technology All HTML CSS Java Script  
 
 

Есть заголовок секции, есть возможность выбора опций, есть с атрибутом multiple который дает возможность сделать выбор нескольких элементов одновременно, и конечно же есть поле error_text куда мы будем сбрасывать текст об ошибке если этот мультиселект будет обязательным к заполнению

*Для меня было открытием что мультивыбор происходит посредством зажатия клавиши Ctrl или Shift и указанием тех элементов которые надо отправить на сервер. Видать невнимательно в свое время читал документацию.

Вроде как работает, но выглядит не очень. Да и мультиселектность, как-то не очевидна. что же давайте улучшим.

 
Your technology 
Technology  All HTML CSS Java Script  You can select several items by pressing Ctrl(or Command)+Element 
 

Добавим немного стилей, что б не было так страшно

.form_label < position: relative; min-height: 88px; >.form_text < vertical-align: top; display: block; margin-bottom: 6px; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: #686ea1; >.form_text:after < content: "*"; position: relative; top: 0; font-size: 13px; color: #f00; >.form_label input, .field_multiselect < position: relative; width: 100%; display: block; min-height: 46px; border: 1px solid #cdd6f3; box-sizing: border-box; border-radius: 8px; padding: 12px 40px 10px 16px; font-size: 14px; color: #a8acc9; outline-color: #cdd6f3; >.form_label input::placeholder, .field_multiselect::placeholder < color: #a8acc9; >.form_label input:hover, .field_multiselect:hover < box-shadow: 0 0 2px rgba(0, 0, 0, 0.16); >.form_label input:focus, .field_multiselect:focus < box-shadow: 0 0 2px rgba(0, 0, 0, 0.16); >.field_multiselect_help < position: absolute; max-width: 100%; background-color: #fff; top: -48px; left: 0; opacity: 0; >.form_label input.error < border-color: #eb5757; >.error_text < color: #eb5757; >.field_multiselect < padding-right: 60px; >.field_multiselect:after < content: ""; position: absolute; right: 14px; top: 15px; width: 6px; height: 16px; background: url("data:image/svg+xml,%3Csvg width='6' height='16' viewBox='0 0 6 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0L6 5H0L3 0Z' fill='%23A8ACC9'/%3E%3Cpath d='M3 16L6 11H0L3 16Z' fill='%23A8ACC9'/%3E%3C/svg%3E") 50% 50% no-repeat; >.multiselect_block < position: relative; width: 100%; >.field_select < position: absolute; top: calc(100% - 2px); left: 0; width: 100%; border: 2px solid #cdd6f3; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; box-sizing: border-box; outline-color: #cdd6f3; z-index: 6; >.field_select[multiple] < overflow-y: auto; >.field_select option < display: block; padding: 8px 16px; width: calc(370px - 32px); cursor: pointer; >.field_select option:checked < background-color: #eceff3; >.field_select option:hover < background-color: #d5e8fb; >.field_multiselect button < position: relative; padding: 7px 34px 7px 8px; background: #ebe4fb; border-radius: 4px; margin-right: 9px; margin-bottom: 10px; >.field_multiselect button:hover, .field_multiselect button:focus < background-color: #dbd1ee; >.field_multiselect button:after < content: ""; position: absolute; top: 7px; right: 10px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%234F5588'/%3E%3C/svg%3E") 50% 50% no-repeat; background-size: contain; >.multiselect_label < position: absolute; top: 1px; left: 2px; width: 100%; height: 44px; cursor: pointer; z-index: 3; >.field_select < display: none; >input.multiselect_checkbox < position: absolute; right: 0; top: 0; width: 40px; height: 40px; border: none; opacity: 0; >.multiselect_checkbox:checked ~ .field_select < display: block; >.multiselect_checkbox:checked ~ .multiselect_label < width: 40px; left: initial; right: 4px; background: #ffffff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%234F5588'/%3E%3C/svg%3E") 50% 50% no-repeat; >.multiselect_checkbox:checked ~ .field_multiselect_help

Теперь на него хоть приятно нажимать. SVG иконки я загнал в CSS, но это не оптимально, и лучше держать их подключаемыми файлами. Для взаимодействия с Я добавил и Тут есть немного магии которая связана с перекрытием слоев через z-index и взаимодействие с элементами через css псевдокласс :checked . С введением этих новых элементов мы можем стилизовать подсказки и дать понять пользователю что он выбрал. Это обеспечит лучшие взаимодействие с элементом. Расширим ещё немного функционал добавив кнопки отображения выбранных пунктов.

///////////// Multiselect field let multiselect_block = document.querySelectorAll(".multiselect_block"); multiselect_block.forEach(parent => < let label = parent.querySelector(".field_multiselect"); let select = parent.querySelector(".field_select"); let text = label.innerHTML; select.addEventListener("change", function(element) < let selectedOptions = this.selectedOptions; label.innerHTML = ""; for (let option of selectedOptions) < let button = document.createElement("button"); button.type = "button"; button.className = "btn_multiselect"; button.textContent = option.value; button.onclick = _ =>< option.selected = false; button.remove(); if (!select.selectedOptions.length) label.innerHTML = text >; label.append(button); > >) >)

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

Так же, поскольку я уверен, что не только я не знал что использует для выбора зажатый Ctrl или Shift Добавим эту подсказку отдельно. Можно б было засунуть в тултип (например вывод через data атрибут), но я подумал о доступности и возможности перевода этой подсказки на другие языки.

Готовый результат multiselect для быстрой работы

Вот что получилось сделать. Для наглядности добавил сразу несколько элементов, что б было понимание что это можно масштабировать, просто добавляя нужные id и связанные с ними Также отделил комментариями нужные элементы что б вы могли применить этот код в своих проектах для удобства.

Он не идеален с точки зрения доступности, но уж лучше так, чем нативный или библиотека под jQuery. Прелесть тега в том что для смартфонов, движки сами покажут мультивыбор при фокусе на теге, и вам не понадобиться думать как впихнуть 15-20 пунктов что б верстка не сломалась.

Надеюсь кому-то это будет полезным.

Источник

Селект с чекбоксами

Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать Ctrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.

Данный пример реализован в виде jQuery плагина, который позволяет вывести несколько независимых селектов:

Верстка списка, стили и JS

Верстка списка проста и требует только класс .checkselect у родительского элемента.

 
Google Inc.  Apple Inc.  Microsoft  Facebook  Amazon  Verizon 

Код плагина

(function($) < function setChecked(target) < var checked = $(target).find("input[type='checkbox']:checked").length; if (checked) < $(target).find('select option:first').html('Выбрано: ' + checked); >else < $(target).find('select option:first').html('Выберите из списка'); >> $.fn.checkselect = function() < this.wrapInner('
' ); this.each(function()< setChecked(this); >); this.find('input[type="checkbox"]').click(function()< setChecked($(this).parents('.checkselect')); >); this.parent().find('.checkselect-control').on('click', function() < $popup = $(this).next(); $('.checkselect-popup').not($popup).css('display', 'none'); if ($popup.is(':hidden')) < $popup.css('display', 'block'); $(this).find('select').focus(); >else < $popup.css('display', 'none'); >>); $('html, body').on('click', function(e) < if ($(e.target).closest('.checkselect').length == 0)< $('.checkselect-popup').css('display', 'none'); >>); >; >)(jQuery); $('.checkselect').checkselect();

CSS стили

.checkselect < position: relative; display: inline-block; min-width: 200px; text-align: left; >.checkselect-control < position: relative; padding: 0 !important; >.checkselect-control select < position: relative; display: inline-block; width: 100%; margin: 0; padding-left: 5px; height: 30px; >.checkselect-over < position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer; >.checkselect-popup < display: none; box-sizing: border-box; margin: 0; padding: 0; width: 100%; height: auto; max-height: 200px; position: absolute; top: 100%; left: 0px; border: 1px solid #dadada; border-top: none; background: #fff; z-index: 9999; overflow: auto; user-select: none; >.checkselect label < position: relative; display: block; margin: 0; padding: 4px 6px 4px 25px; font-weight: normal; font-size: 1em; line-height: 1.1; cursor: pointer; >.checkselect-popup input < position: absolute; top: 5px; left: 8px; margin: 0 !important; padding: 0; >.checkselect-popup label:hover < background: #03a2ff; color: #fff; >.checkselect-popup fieldset < display: block; margin: 0; padding: 0; border: none; >.checkselect-popup fieldset input < left: 15px; >.checkselect-popup fieldset label < padding-left: 32px; >.checkselect-popup legend

Группировка элементов

Сгруппировать элементы chekbox на подобие тега можно дополнив верстку тегами и :

 
Группа 1
  Google Inc.  Apple Inc.  Microsoft  
Группа 2
  Facebook  Amazon  Verizon  McDonald's 
 
 

Источник