MultiSelect.js

// We are creating a new class definition. The class definition itself
// will be added to the global window object.
window.MultiSelect = (function() {

  function MultiSelect(options) {
    var defaults = {
      checkboxSelector: ".multi-select-checkbox",
      onSelector: ".multi-select-on",
      selectAllSelector: "#multi-select-all"
    };

    // Using jquery's extend to map user options onto a
    // pre-defined object.
    this.options = $.extend(defaults, options);
  }

  MultiSelect.prototype.hide = function () {
    console.log("MultiSelect: hide");
    $(this.options.onSelector).hide();
  };

  MultiSelect.prototype.initialize = function() {
    this.hide();
    this.listenForCheckedEvent();
  };

  MultiSelect.prototype.listenForCheckedEvent = function() {
    // Be sure to call .bind() on the callback, otherwise the callback
    // will have the context of the checkbox, not the class definition.
    $(this.options.selectAllSelector).click(function() {            
      var isChecked = $(this.options.selectAllSelector).is(":checked");
      this.toggleChecked(isChecked);
    }.bind(this));
  };

  MultiSelect.prototype.setChecked = function (value) {
    console.log("MultiSelect: setChecked(" + value + ")");
    $(this.options.checkboxSelector).prop("checked", value);
  };

  MultiSelect.prototype.show = function () {
    console.log("MultiSelect: show");
    $(this.options.onSelector).show();
  };

  MultiSelect.prototype.toggleChecked = function(isChecked) {
    if (isChecked) {
      this.setChecked(true);
    } else {
      this.setChecked(false);
    }
  };

  return MultiSelect;

})();

// Usage...
//   var multiSelect = new MultiSelect();
//   multiSelect.initialize();