javascript - Bootstrap multiselect - to trigger event 'onSelectAll' or 'onDeselectAll' when De-s

admin管理员组

文章数量:1430459

I want to put a listener on 'onDeselectAll' event, but 'onDeselectAll' - does not exist in the latest version of the Bootstrap multiselect plugin.

I want something like that

        $('.multiselect').multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            includeSelectAllOption: true,
            includeSelectAllDivider: true,
            maxHeight: 400,
            onSelectAll: function () {
                console.log("select-all-nonreq");
            },
            onDeselectAll: function () {
                console.log("deselect-all-nonreq");
            }
        });

What is the best way to do that?

What is the best fork solving this issue? I found this fork not quite the same as 'onDeselectAll' but close. Is there anything better?

I red somewhere that this option existed in older versions, why did they remove it?

I've found the developers made an issue about it. Does it mean they are planning to fix it? When?

I was checking if Select2 can do 'select all' is it possible?

What should I do? Wait, to go older version or use another fork use another plugin?

This is a desired result.

I want to put a listener on 'onDeselectAll' event, but 'onDeselectAll' - does not exist in the latest version of the Bootstrap multiselect plugin.

I want something like that

        $('.multiselect').multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            includeSelectAllOption: true,
            includeSelectAllDivider: true,
            maxHeight: 400,
            onSelectAll: function () {
                console.log("select-all-nonreq");
            },
            onDeselectAll: function () {
                console.log("deselect-all-nonreq");
            }
        });

What is the best way to do that?

What is the best fork solving this issue? I found this fork not quite the same as 'onDeselectAll' but close. Is there anything better?

I red somewhere that this option existed in older versions, why did they remove it?

I've found the developers made an issue about it. Does it mean they are planning to fix it? When?

I was checking if Select2 can do 'select all' is it possible?

What should I do? Wait, to go older version or use another fork use another plugin?

This is a desired result.

• javascript
• jquery
• jquery-plugins
• bootstrap-multiselect

Share Improve this question Follow edited Jul 1, 2016 at 0:36 Yevgeniy Afanasyev asked Jul 1, 2016 at 0:25 Yevgeniy AfanasyevYevgeniy Afanasyev 41.6k3030 gold badges186186 silver badges207207 bronze badges 1

• This bug is resolved in the new version. I have used it. so no need to implement any workaround. davidstutz.github.io/bootstrap-multiselect – Asad Naeem Commented Jul 27, 2021 at 11:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Your code is correct, these events already exist: http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-onSelectAll

But... There is a bug. I created a fork on this project to fix this bug... I've already made a pull request that is waiting for merge.

Pull request: https://github./davidstutz/bootstrap-multiselect/pull/764/files

My Fork: https://github./lmcarreiro/bootstrap-multiselect

I added an onchange function to the HTML which counts how many options are selected and it is working:

<select id="yourID" class="custom-select" onchange="unselectAll();" multiple>

This is the function to verify that nothing is selected:

function unselectAll(){
    if($('#yourID :selected').length==0){
        //Do what you need here
    }
}

Yup this was a bug I encountered as well hence you can consider going for something like this

$(document).on('change','.multiselect',function(){
    var labels = [];
    var brands = $('#field option:selected');
    $(brands).each(function(index, brand){
        labels.push($(this).text());
    });
    var values = $("#field").val();
    if(values.length > 0){
        console.log(labels);
        console.log(values)
    }
})

本文标签：