Search code examples
jqueryoptgroup

Jquery bootstrap multiselect optgroup selection


I am using Jquery bootstrap multiselect plugin which seems pretty good and fulfill most of the requirements which i needed.

The only additional functionality i want is to add checkbox to OptGroup so if user wants to select complete group they can select all by clicking it.

any help appreciated.

http://davidstutz.github.io/bootstrap-multiselect/#examples

enter image description here


Solution

  • Try something like this:

    $('.multiselect-group').before('<input type="checkbox" />');
    $(document).on('click', '.multiselect-group', function(event) {
        var checkAll = true;
        var $opts = $(this).parent().nextUntil(':has(.multiselect-group)'); 
        var $inactive = $opts.filter(':not(.active)'); 
        var $toggleMe = $inactive;
        if ($inactive.length == 0) { 
            $toggleMe = $opts;
            checkAll = false;
        }
        $toggleMe.find('input').click();
        $(this).parent().find('input').attr('checked', checkAll);
        event.preventDefault();
    });