CODEWITHSUNDEEP
jquerytwitter-bootstrap
Sebastian
Sebastian

Reputation: 4811

Bootstrap Multiselect check select all is ticked on a button click

I am using bootstrap multiselect plugin on a multiselect list and on a button click event i have to make an ajax call.

I can see from documentation of plugin that the event onSelectAll helps to detects the time user press select all option 

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

But is it possible to check the same on a button click event too . My multiselect initialization is like below 

     $(function () {
        $("#SelectedListA").multiselect({
            enableCaseInsensitiveFiltering: true,
            includeSelectAllOption: true               
        });          

    });

And the event for button click is like 

   $("#btn_loadSchools").click(function(){

            var all_selected= ???  //any way to detect whether all items are selected or not
            FillDropdownSchools(all_selected,$('#SelectedListA').val());
        });

    var FillDropdown2 = function (all_selected,selectedItems) {
    }

Upvotes: 0

Views: 6151

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Define a global variable for this "all selected" state.

Then using the onSelectAll handler, set a true to it.
And using the onChange handler, set it to false.

Now, in your click handler for the button, just check this variable.

var allSelected = false;

$('#example-onSelectAll').multiselect({
  includeSelectAllOption: true,
  onSelectAll: function(){
    allSelected = true;
  },
  onChange: function(){
    allSelected = false;
  }
});

$("#btn_loadSchools").click(function(){
  if(allSelected){
    alert("Yes!");
  }else{
    alert("No.");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>

<select id="example-onSelectAll" multiple="multiple">
  <option value="cheese">Cheese</option>
  <option value="tomatoes">Tomatoes</option>
  <option value="mozarella">Mozzarella</option>
  <option value="mushrooms">Mushrooms</option>
  <option value="pepperoni">Pepperoni</option>
  <option value="onions">Onions</option>
</select>

<button id="btn_loadSchools">Check if all selected</button>

Upvotes: 6

Related Questions