Fixed #506, #563 including test and documentation.

dist/js/bootstrap-multiselect.js

@@ -675,11 +675,21 @@
                     // check or uncheck items
                     var allChecked = true;
                     var optionInputs = $visibleOptions.find('input');
+                    var values = [];
+                    
                     optionInputs.each(function() {
                         allChecked = allChecked && $(this).prop('checked');
+                        values.push($(this).val());
                     });
 
-                    optionInputs.prop('checked', !allChecked).trigger('change');
+                    if (!allChecked) {
+                        this.select(values, false);
+                    }
+                    else {
+                        this.deselect(values, false);
+                    }
+                    
+                    this.options.onChange(optionInputs, !allChecked);
                }, this));
             }
         },

index.html

@@ -452,6 +452,47 @@
     });
 </script>
 </pre>
+                                    </div>
+                                    
+                                    <p>
+                                        Note that the behavior of <code>onChange</code> changes. Whenever an optgroup is changed/clicked, the <code>onChange</code> event is fired with all affected options as first parameter.
+                                    </p>
+                                    
+                                    <div class="example">
+                                        <script type="text/javascript">
+                                            $(document).ready(function() {
+                                                $('#example-enableClickableOptGroups-onChange').multiselect({
+                                                    enableClickableOptGroups: true,
+                                                    onChange: function(option, checked) {
+                                                        alert(option.length + ' options ' + (checked ? 'selected' : 'deselected'));
+                                                    }
+                                                });
+                                            });
+                                        </script>
+                                        <select id="example-enableClickableOptGroups-onChange" multiple="multiple">
+                                            <optgroup label="Group 1">
+                                                <option value="1-1">Option 1.1</option>
+                                                <option value="1-2" selected="selected">Option 1.2</option>
+                                                <option value="1-3" selected="selected">Option 1.3</option>
+                                            </optgroup>
+                                            <optgroup label="Group 2">
+                                                <option value="2-1">Option 2.1</option>
+                                                <option value="2-2">Option 2.2</option>
+                                                <option value="2-3">Option 2.3</option>
+                                            </optgroup>
+                                        </select>
+                                    </div>
+                                    <div class="highlight">
+<pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(document).ready(function() {
+        $('#example-enableClickableOptGroups').multiselect({
+            enableClickableOptGroups: true
+        });
+    });
+&lt;/script&gt;
+</pre>
+                                    </div>
                                 </td>
                             </tr>
                             <tr>
@@ -709,6 +750,10 @@
                                         A function which is triggered on the change event of the options. Note that the event is not triggered when selecting or deselecting options using the <code>select</code> and <code>deselect</code> methods provided by the plugin.
                                     </p>
 
+                                    <p class="alert alert-warning">
+                                        Note that the behavior of <code>onChange</code> changes when setting <code>enableClickableOptGroups</code> to <code>true</code>.
+                                    </p>
+                                    
                                     <div class="example">
                                         <script type="text/javascript">
                                             $(document).ready(function() {

tests/spec/bootstrap-multiselect.js

@@ -267,6 +267,10 @@ describe('Bootstrap Multiselect "Single Selection"', function() {
 });
 
 describe('Bootstrap Multiselect "Optgroups"', function() {
+    
+    // Count the number of onChanges fired.
+    var fired = 0;
+    
     beforeEach(function() {
         var $select = $('<select id="multiselect" multiple="multiple"></select>');
         
@@ -284,7 +288,10 @@ describe('Bootstrap Multiselect "Optgroups"', function() {
         
         $select.multiselect({
             buttonContainer: '<div id="multiselect-container"></div>',
-            enableClickableOptGroups: true
+            enableClickableOptGroups: true,
+            onChange: function(option, checked) {
+                fired++;
+            }
         });
     });
     
@@ -311,6 +318,30 @@ describe('Bootstrap Multiselect "Optgroups"', function() {
         });
     });
     
+    it('Clickable groups should fire onChange only once.', function() {
+        expect($('#multiselect option:selected').length).toBe(0);
+        
+        fired = 0;
+        expect(fired).toBe(0);
+        
+        var i = 0;
+        $('#multiselect-container li.multiselect-group').each(function() {
+            $('label', $(this)).click();
+            
+            // Selected
+            expect(fired).toBe(1);
+            fired = 0;
+            
+            $('label', $(this)).click();
+            
+            // Deselected
+            expect(fired).toBe(1);
+            fired = 0;
+            
+            i++;
+        });
+    });
+    
     afterEach(function() {
         $('#multiselect').multiselect('destroy');
         $('#multiselect').remove();