Live Code Editor
Try it yourself..
Select2 multiselect with checkbox
Select2 is a useful feature for selecting multiple checkboxes. Allow us to guide you through the process of implementing Select2 to achieve this functionality. With Bootstrap, creating a select2 select multiple checkboxes example becomes seamless. Below, we'll walk you through an illustrative example of selecting multiple checkboxes using Bootstrap and Select2. Let's delve into an example demonstrating how to use Select2 for the selection of multiple checkboxes within a Bootstrap framework.
HTML
xxxxxxxxxx <div class="container"> <div class="row"> <h4>Select2 multiselect checkbox</h4> <select class="js-select2" multiple="multiple"> <option value="O1" data-badge="">Option1</option> <option value="O2" data-badge="">Option2</option> <option value="O3" data-badge="">Option3</option> <option value="O4" data-badge="">Option4</option> <option value="O5" data-badge="">Option5</option> <option value="O6" data-badge="">Option6</option> <option value="O7" data-badge="">Option7</option> <option value="O8" data-badge="">Option8</option> <option value="O9" data-badge="">Option9</option> <option value="O10" data-badge="">Option10</option> <option value="O11" data-badge="">Option11</option> <option value="O12" data-badge="">Option12</option> <option value="O13" data-badge="">Option13</option> </select> <div class="select-icon" style="margin-top: 40px;"> <h4>icons</h4> <select class="icons_select2" single="single"> <option value="" class="placeholder"></option> <option value="O1" data-icon="fa-apple" data-badge="55">Option1</option> <option value="O2" data-icon="fa-android" data-badge="55">Option2</option> <option value="O3" data-icon="fa-windows" data-badge="55">Option3</option> <option value="O4" data-icon="fa-dropbox" data-badge="55">Option4</option> <option value="O5" data-icon="fa-github" data-badge="55">Option5</option> <option value="O6" data-icon="fa-cloud" data-badge="55">Option6</option> <option value="O7" data-badge="55">Option7</option> <option value="O8" data-badge="55">Option8</option> <option value="O9" data-badge="55">Option9</option> <option value="O10" data-badge="55">Option10</option> <option value="O11" data-badge="55">Option11</option> <option value="O12" data-badge="55">Option12</option> <option value="O13" data-badge="55">Option13</option> </select>CSS
xxxxxxxxxx.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { body { font-family: 'Ubuntu', sans-serif; font-weight: bold;}.select2-container { min-width: 400px;}.select2-results__option { padding-right: 20px; vertical-align: middle;}.select2-results__option:before { content: ""; display: inline-block; position: relative; height: 20px; width: 20px; border: 2px solid #e9e9e9; border-radius: 4px; background-color: #fff; margin-right: 20px; vertical-align: middle;}.select2-results__option[aria-selected=true]:before { font-family:fontAwesome; content: "\f00c"; color: #fff; background-color: #f77750; border: 0; display: inline-block; padding-left: 3px;}.select2-container--default .select2-results__option[aria-selected=true] { background-color: #fff;}JavaScript
xxxxxxxxxx $(".js-select2").select2({ closeOnSelect : false, placeholder : "Placeholder", allowHtml: true, allowClear: true, tags: true }); $('.icons_select2').select2({ width: "100%", templateSelection: iformat, templateResult: iformat, allowHtml: true, placeholder: "Placeholder", dropdownParent: $( '.select-icon' ), allowClear: true, multiple: false }); function iformat(icon, badge,) { var originalOption = icon.element; var originalOptionBadge = $(originalOption).data('badge'); return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '<span class="badge">' + originalOptionBadge + '</span></span>'); }