Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 803
d-man Avatar asked Dec 07 '22 03:12

d-man


2 Answers

No need to do any code to achieve your requirement.

There is an option called enableClickableOptGroups in this plugin to select all options of optgroup

http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-enableClickableOptGroups

like image 85
AsgarAli Avatar answered Jan 07 '23 16:01

AsgarAli


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();
});
like image 36
PatrickDelancy Avatar answered Jan 07 '23 15:01

PatrickDelancy