Bootstrap Multiselect - De-select / Uncheck All Options In A Single Click

Answer :

You can use .multiselect('refresh') method as mentioned in the bootstrap-multiselect documentation here.

So, add an HTML button / icon next to the multi-select select list and then use the below code:

$("#reset_client").click(function(){   $('option', $('#select_client')).each(function(element) {     $(this).removeAttr('selected').prop('selected', false);   });   $("#select_client").multiselect('refresh'); });

<select name="clients[]" multiple="multiple" id="select_client" style="display: none;">     <option value="multiselect-all"> Select all</option>     <option value="1">Client 1</option>     <option value="2">Client 2</option>     <option value="3">Client 3</option>     <option selected="selected" value="4">Client 4</option>     <option selected="selected" value="5">Client 5</option>     <option value="6">Client 6</option>     <option selected="selected" value="7">Client 7</option>     <option value="8">Client 8</option> </select>  <input type="button" value="Reset" name="reset_clients" id="reset_client" class="reset_button" title="Clear Selection">

You can include a "select all" button, pushing that twice would "unselect all". To do this add this option:

includeSelectAllOption:true 

This will deslect all for a bootstrap multiselect based on a select element.

function multiselect_deselectAll($el) {     $('option', $el).each(function(element) {         $el.multiselect('deselect', $(this).val());     }); }  $('.multiselect').each(function() {     var select = $(this);     multiselect_deselectAll(select); }); 

You could add an option by hand that says "Select all" and then when it's pressed call the reset function.

See: https://github.com/davidstutz/bootstrap-multiselect/issues/271

Use below code to deselect all select item in multiselect bootstrap dropdown

$("#ddlMultiSelectId").multiselect('clearSelection');