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');
Comments
Post a Comment