Merge pull request #388 from scenting/master

#305, #302. Added enableClickableOptGroups option.

index.html

@@ -246,6 +246,10 @@ $(document).ready(function() {
                     $('#example53-deselect').on('click', function() {
                         $('#example53').multiselect('deselect', 'cheese');
                     });
+
+                    $('#example54').multiselect({
+                        enableClickableOptGroups: true
+                    });
                 });
             </script>
             
@@ -524,6 +528,28 @@ $(document).ready(function() {
                         Option groups and options without any group are supported simultaneously.
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <select id="example54" multiple="multiple">
+                            <optgroup label="Mathematics">
+                                <option value="analysis">Analysis</option>
+                                <option value="algebra">Linear Algebra</option>
+                                <option value="discrete">Discrete Mathematics</option>
+                                <option value="numerical">Numerical Analysis</option>
+                                <option value="probability">Probability Theory</option>
+                            </optgroup>
+                            <optgroup label="Computer Science">
+                                <option value="programming">Introduction to Programming</option>
+                                <option value="automata">Automata Theory</option>
+                                <option value="complexity">Complexity Theory</option>
+                                <option value="software">Software Engineering</option>
+                            </optgroup>
+                        </select>
+                    </td>
+                    <td>
+                        Use <code>enableClickableOptGroups</code> to make optgroup headers clickable to select / deselect all options inside an optgroup.
+                    </td>
+                </tr>
                 <tr>
                     <td>
                         <select id="example20" multiple="multiple">
@@ -1161,6 +1187,23 @@ $(document).ready(function() {
         disableIfEmpty: true
     });
 });
+&lt;/script&gt;
+                            </pre>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><code>enableClickableOptGroups</code></td>
+                        <td>
+                            Set to <code>true</code> to make optgroup headers clickable to select/deselect options.
+                        </td>
+                        <td>
+                            <pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+$(document).ready(function() {
+    $(&#39;.multiselect&#39;).multiselect({
+        enableClickableOptGroups: true
+    });
+});
 &lt;/script&gt;
                             </pre>
                         </td>

js/bootstrap-multiselect.js

@@ -242,6 +242,7 @@
             selectAllValue: 'multiselect-all',
             enableFiltering: false,
             enableCaseInsensitiveFiltering: false,
+            enableClickableOptGroups: false,
             filterPlaceholder: 'Search',
             // possible options: 'text', 'value', 'both'
             filterBehavior: 'text',
@@ -527,6 +528,26 @@
                     event.preventDefault();
                 }
             }, this));
+
+            if(this.options.enableClickableOptGroups && this.options.multiple) {
+                $('li.group', this.$ul).on('click', $.proxy(function(event) {
+                    event.stopPropagation();
+
+                    var group = $(event.target).parent();
+
+                    // Search all option in optgroup
+                    var $options = group.nextUntil('li.group');
+
+                    // check or uncheck items
+                    var allChecked = true;
+                    var optionInputs = $options.find('input');
+                    optionInputs.each(function() {
+                        allChecked = allChecked && $(this).prop('checked');
+                    });
+
+                    optionInputs.prop('checked', !allChecked).trigger('change');
+               }, this));
+            }
         },
 
         /**