bootstrap multiselect - De-select / Uncheck all options in a single click

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

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">

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

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