Merge pull request #57 from luisrudge/master

Added '[x] Select all' option.

Merge pull request #57 from luisrudge/master
Added '[x] Select all' option.
a7eeb1e9 · David Stutz · 8d99a6d9 · 806288b1 · a7eeb1e9 · a7eeb1e9
Commit a7eeb1e9 authored Apr 20, 2013 by David Stutz
Show whitespace changes
Inline Side-by-side

Showing with 48 additions and 19 deletions

README.md README.md +4 -0

index.html index.html +25 -8

bootstrap-multiselect.js js/bootstrap-multiselect.js +19 -11

No files found.
--- a/README.md
+++ b/README.md
@@ -192,6 +192,10 @@ The used container holding both the dropdown button and the dropdown menu.

 Define if the menu should drop to the right of the button or not, by adding `pull-right` class to `<ul class="dropdown-menu">`. Default is false.

+**includeSelectAllOption**
+
+Define if a `<option value="select-all-option"> Select all</option>` should be appended at the beginning of the options list. When this item is clicked, it will check/uncheck other items. This only works when `multiple="multiple"` is enabled. Default is false.
+
 **onChange**

 Assign an event handler to the change event:

--- a/index.html
+++ b/index.html
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 	<head>
 		<title>Bootstrap Multiselect</title>
@@ -103,7 +103,9 @@
 					
 					$('#example24').multiselect();

-                                        $('#example25').multiselect({dropRight: true});
+					$('#example25').multiselect({ dropRight: true });
+
+					$('#example27').multiselect({ includeSelectAllOption: true });
 				});
 			</script>
 			<p>
@@ -140,6 +142,21 @@
 			            Select with preselected options: <code>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code>
 			        </td>
 			    </tr>
+                <tr>
+					<td>
+						<select id="example27" 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>
+					</td>
+					<td>
+						Multiselect with a 'Select all' option
+					</td>
+				</tr>
 				<tr>
 					<td>
 						<select id="example3" multiple="multiple">

--- a/js/bootstrap-multiselect.js
+++ b/js/bootstrap-multiselect.js
@@ -117,10 +117,15 @@
 			// Maximum height of the dropdown menu.
 			// If maximum height is exceeded a scrollbar will be displayed.
 			maxHeight: false,
+			includeSelectAllOption: false
 		},

 		constructor: Multiselect,
 		
+	    // Add the [] Select all option
+		createSelectAllOption: function () {
+		    $(this.$select).html('<option value="select-all-option"> Select all</option>' + this.$select.html());
+		},
 		// Will build an dropdown element for the given option.
 		createOptionValue: function(element) {
 			if ($(element).is(':selected')) {
@@ -155,6 +160,10 @@

 		// Build the dropdown and bind event handling.
 		buildDropdown: function () {
+		    //If options.includeSelectAllOption === true, add the include all checkbox
+		    if (this.options.includeSelectAllOption && this.options.multiple) {
+		        this.createSelectAllOption();
+		    }
 			this.$select.children().each($.proxy(function (index, element) {
 				// Support optgroups and options without a group simultaneously.
 				var tag = $(element).prop('tagName').toLowerCase();
@@ -184,7 +193,7 @@
 			// Bind the change event on the dropdown elements.
 			$('ul li input', this.$container).on('change', $.proxy(function(event) {
 				var checked = $(event.target).prop('checked') || false;
-
+				var isSelectAllOption = $(event.target).val() == 'select-all-option';
 				if (this.options.selectedClass) {
 					if (checked) {
 						$(event.target).parents('li').addClass(this.options.selectedClass);
@@ -194,17 +203,16 @@
 					}
 				}

-				var option = $('option', this.$select).filter(function () { return $(this).val() == $(event.target).val(); })
-
+				var option = $('option', this.$select).filter(function() { return $(this).val() == $(event.target).val(); });
+				var $optionsNotThis = $('option', this.$select).not($(option));
+				var $checkboxesNotThis = $('input', this.$container).not($(event.target));
+				if (isSelectAllOption) {
+				    $checkboxesNotThis.filter(function () { return $(this).is(':checked') != checked; }).trigger('click');
+				}
 				if (checked) {
 					option.attr('selected', 'selected');
 					option.prop('selected', 'selected');
-
-					var $optionsNotThis = $('option', this.$select).not($(option));
-
 					if (!this.options.multiple)	{
-						var $checkboxesNotThis = $('input', this.$container).not($(event.target));
-
 						if (this.options.selectedClass) {
 							$($checkboxesNotThis).parents('li').removeClass(this.options.selectedClass);
 						}
@@ -374,11 +382,11 @@
 			if (navigator.appName == 'Microsoft Internet Explorer') {
 				var regex  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
 				if (regex.exec(navigator.userAgent) != null) {
-					return $('option:selected', this.$select);
+					return $('option:selected[value!="select-all-option"]', this.$select);
 				}
 			}
 		
-			return $('option[selected]', this.$select);
+			return $('option[selected][value!="select-all-option"]', this.$select);
 		}
 	};