Select2 Multi-Checkboxes using JavaScript

Select2 Multi-Checkboxes using JavaScript | Try It

In this tutorial, we will explore how to create a multi-checkbox dropdown using Select2 and JavaScript. This approach will allow users to select multiple options from a drop-down list, making it an ideal solution for forms where multiple choices are possible.

HTML

CSS

JavaScript

$('.js-example-basic-multiple').select2({
    placeholder: 'Select options',
    closeOnSelect: false,
    templateResult: formatState,
    allowHtml: true,
    allowClear: true,
    tags: true
});

$('#multiSelect').on('select2:select', function(e) {
    updateCheckboxState();
});

$('#multiSelect').on('select2:unselect', function(e) {
    updateCheckboxState();
});

function updateCheckboxState() {
    var selectedOptions = $('.select2-results__option[aria-selected=true]');
    selectedOptions.each(function() {
        var $checkbox = $(this).find('.select2-checkbox');
        $checkbox.prop('checked', true);
    });

var unselectedOptions = $('.select2-results__option[aria-selected=false]');
    unselectedOptions.each(function() {
        var $checkbox = $(this).find('.select2-checkbox');
        $checkbox.prop('checked', false);
    });
}

function formatState(state) {
    if (!state.id) {
        return state.text;
    }

var $state = $(
        '<span><input type="checkbox" class="select2-checkbox" /> ' + state.text + '</span>'
    );

$state.find('.select2-checkbox').prop('checked', state.selected);

$state.find('.select2-checkbox').on('click', function() {
        state.selected = !state.selected;
        $(this).prop('checked', state.selected);
        $('#multiSelect').trigger('change');
    });

return $state;
}