用于Bootstrap Multiselect的令人敬畏的Bootstrap复选框 - 全选选项

Question

我正在使用http://davidstutz.github.io/bootstrap-multiselect/，我使用Awesome Bootstrap复选框（http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/）设置了复选框样式。我使用了一个jsfiddle来帮助我实现这个目标，但我无法弄清楚如何添加Select All选项。 Bootstrap Multiselect允许您添加一个select all，但我的JS更改了包含的select all选项。

Bootstrap Multiselect全选

$(document).ready(function() {
    $('.mySelect').multiselect({
        includeSelectAllOption: true
    });
});

我的HTML结构

<select class="mySelect" multiple="multiple">
          <option value="vikings">Minnesota Vikings</option>
          <option value="packers">Green Bay Packers</option>
          <option value="lions">Detroit Lions</option>
          <option value="bears">Chicago Bears</option>
          <option value="patriots">New England Patriots</option>
          <option value="jets">New York Jets</option>
          <option value="bills">Buffalo Bills</option>
          <option value="dolphins">Miami Dolphins</option>
</select>

JS

$(document).ready(function() {
  $('select').multiselect({
    templates: { // Use the Awesome Bootstrap Checkbox structure 
     li: '<li class="checkList"><a tabindex="0"><div class="aweCheckbox primary"><label for=""></label></div></a></li>'}
});
  $('.multiselect-container div.aweCheckbox.primary').each(function(index) {

    var id = 'multiselect-' + index,
      $input = $(this).find('input');

    // Associate the label and the input
     $(this).find('label').attr('for', id);
     $input.attr('id', id);

    // Remove the input from the label wrapper
     $input.detach();

   // Place the input back in before the label
     $input.prependTo($(this));

     $(this).click(function(e) {
  // Prevents the click from bubbling up and hiding the dropdown
     e.stopPropagation();
    });

  });
});

CSS

.aweCheckbox {
  padding-left: 20px;
}
.aweCheckbox label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 5px;
  font-weight: normal;
}
.aweCheckbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.aweCheckbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  font-size: 11px;
  color: #555555;
}
.aweCheckbox input[type="checkbox"],
.aweCheckbox input[type="radio"] {
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
.aweCheckbox input[type="checkbox"]:focus + label::before,
.aweCheckbox input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.aweCheckbox input[type="checkbox"]:checked + label::after,
.aweCheckbox input[type="radio"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";
}
.aweCheckbox input[type="checkbox"]:indeterminate + label::after,
.aweCheckbox input[type="radio"]:indeterminate + label::after {
  display: block;
  content: "";
  width: 10px;
  height: 3px;
  background-color: #555555;
  border-radius: 2px;
  margin-left: -16.5px;
  margin-top: 7px;
}
.aweCheckbox input[type="checkbox"]:disabled,
.aweCheckbox input[type="radio"]:disabled {
  cursor: not-allowed;
}
.aweCheckbox input[type="checkbox"]:disabled + label,
.aweCheckbox input[type="radio"]:disabled + label {
  opacity: 0.65;
}
.aweCheckbox input[type="checkbox"]:disabled + label::before,
.aweCheckbox input[type="radio"]:disabled + label::before {
  background-color: #eeeeee;
  cursor: not-allowed;
}
.aweCheckbox.aweCheckbox-circle label::before {
  border-radius: 50%;
}
.aweCheckbox.aweCheckbox-inline {
  margin-top: 0;
}

.aweCheckbox input[type="checkbox"]:checked + label::before,
.aweCheckbox input[type="radio"]:checked + label::before {
  background-color: #007DC3;
  border-color: #007DC3;
}
.aweCheckbox input[type="checkbox"]:checked + label::after,
.aweCheckbox input[type="radio"]:checked + label::after {
  color: #fff;
}

.aweCheckbox.primary input[type="checkbox"]:checked + label::before,
.aweCheckbox.primary input[type="radio"]:checked + label::before {
  background-color: #ffffff;
  border-color: #cccccc; 
}

.aweCheckbox.primary input[type="checkbox"]:checked + label::after,
.aweCheckbox.primary input[type="radio"]:checked + label::after {
  color: #333333; 
}