Selection buttons

README.md

@@ -822,6 +822,22 @@ GOVUK.stickAtTopWhenScrolling.init();
 If you also include the `stopScrollingAtFooter` JavaScript this will also try
 and stop the elements before they get to the bottom.
 
+## Selection buttons
+
+Script to support a specific design of radio buttons and checkboxes wrapped in `<label>` tags:
+
+    <label>
+      <input type="radio" name="size" value="medium" />
+    </label>
+
+When the input is focused or its `checked` attribute is set, classes are added to their parent labels so their styling can show this.
+
+To apply this behaviour to elements with the above HTML pattern, call the `GOVUK.selectionButtons` function with their inputs:
+
+```
+var $buttons = $("label input[type='radio'], label input[type='checkbox']");
+GOVUK.selectionButtons($buttons);
+```
 
 ## Licence
 

javascripts/govuk/selection-buttons.js

@@ -0,0 +1,158 @@
+(function () {
+  "use strict"
+  var root = this,
+      $ = root.jQuery;
+
+  if (typeof GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  var BaseButtons = function ($elms, opts) {
+    var _this = this;
+
+    this.$elms = $elms;
+    this.selectedClass = 'selected';
+    this.focusedClass = 'focused';
+    if (opts !== undefined) {
+      $.each(opts, function (optionName, optionObj) {
+        _this[optionName] = opts[optionName];
+      });
+    }
+    this.setup();
+    this.bindEvents();
+  };
+  BaseButtons.prototype.markFocused = function ($elm, state) {
+    var elmId = $elm.attr('id');
+
+    if (state === 'focused') {
+      $elm.parent('label').addClass(this.focusedClass);
+    } else {
+      $elm.parent('label').removeClass(this.focusedClass);
+    }
+  };
+
+  var RadioButtons = function ($elms, opts) {
+    BaseButtons.apply(this, arguments);
+  };
+  RadioButtons.prototype.setup = function () {
+    var _this = this;
+
+    this.selections = {};
+    $.each(this.$elms, function (index, elm) {
+      var $elm = $(elm),
+          radioName = $elm.attr('name');
+
+      if (typeof _this.selections[radioName] === 'undefined') {
+        _this.selections[radioName] = false;
+      }
+      if ($elm.is(':checked')) {
+        _this.markSelected($elm);
+        _this.selections[radioName] = $elm.attr('id');
+      }
+    });
+  };
+  RadioButtons.prototype.bindEvents = function () {
+    var _this = this;
+
+    this.$elms
+      // some browsers fire the 'click' when the selected radio changes by keyboard
+      .on('click change', function (e) {
+        var $elm = $(e.target);
+
+        if ($elm.is(':checked')) {
+          _this.markSelected($elm);
+        }
+      })
+      .on('focus blur', function (e) {
+        var state = (e.type === 'focus') ? 'focused' : 'blurred';
+
+        _this.markFocused($(e.target), state);
+      });
+  };
+  RadioButtons.prototype.markSelected = function ($elm) {
+    var radioName = $elm.attr('name'),
+        previousSelection = this.selections[radioName];
+
+    if (previousSelection) {
+      $('#' + previousSelection).parent('label').removeClass(this.selectedClass);
+    }
+    $elm.parent('label').addClass(this.selectedClass);
+    this.selections[radioName] = $elm.attr('id');
+  };
+  RadioButtons.prototype.markFocused = function ($elm) {
+    BaseButtons.prototype.markFocused.apply(this, arguments);
+  };
+
+  var CheckboxButtons = function ($elms, opts) {
+    BaseButtons.apply(this, arguments);
+  };
+  CheckboxButtons.prototype.setup = function () {
+    var _this = this;
+
+    this.$elms.each(function (idx, elm) {
+      var $elm = $(elm);
+
+      if ($elm.is(':checked')) {
+        _this.markSelected($elm);
+      }
+    });
+  };
+  CheckboxButtons.prototype.bindEvents = function () {
+    var _this = this;
+
+    this.$elms
+      .on('click', function (e) {
+        _this.markSelected($(e.target));
+      })
+      .on('focus blur', function (e) {
+        var state = (e.type === 'focus') ? 'focused' : 'blurred';
+
+        _this.markFocused($(e.target), state);
+      });
+  };
+  CheckboxButtons.prototype.markSelected = function ($elm) {
+    if ($elm.is(':checked')) {
+      $elm.parent('label').addClass(this.selectedClass);
+    } else {
+      $elm.parent('label').removeClass(this.selectedClass);
+    }
+  };
+  CheckboxButtons.prototype.markFocused = function ($elm) {
+    BaseButtons.prototype.markFocused.apply(this, arguments);
+  };
+
+  root.GOVUK.RadioButtons = RadioButtons;
+  root.GOVUK.CheckboxButtons = CheckboxButtons;
+
+  var selectionButtons = function ($elms, opts) {
+    var addToSet,
+        $radios,
+        $checkboxes;
+
+    addToSet = function ($elm, $set) {
+      if ($set) {
+        $set = $set.add($elm);
+      } else {
+        $set = $elm;
+      }
+      return $set;
+    };
+
+    $elms.each(function (idx, elm) {
+      var $elm = $(elm);
+
+      if ($elm.attr('type') === 'radio') {
+        $radios = addToSet($elm, $radios);
+      } else {
+        $checkboxes = addToSet($elm, $checkboxes);
+      }
+    });
+
+    if ($radios) {
+      new GOVUK.RadioButtons($radios, opts);
+    }
+    if ($checkboxes) {
+      new GOVUK.CheckboxButtons($checkboxes, opts);
+    }
+  };
+
+  root.GOVUK.selectionButtons = selectionButtons;
+}).call(this);