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>

The script allows the label styling to reflect the state of the input inside because changes in state cause classes to be added or removed from the parent label. This makes the following styling possible:

Normal state:

![image](https://cloud.githubusercontent.com/assets/87140/3718395/cb348332-1635-11e4-8a27-2bcfd8881c2f.png)

Focused state:

![image](https://cloud.githubusercontent.com/assets/87140/3718403/d6274e6e-1635-11e4-829c-4dcbeb1cc50d.png)

Focused and selected state:

![image](https://cloud.githubusercontent.com/assets/87140/3718409/e3e4e4bc-1635-11e4-8c27-b7a62bf5e7ed.png)

A test page is available in the Gist to see the script working in-place. It requires your placing the `selection-buttons.js` script in the same folder as the page.

https://gist.github.com/tombye/4875fb3ace4f67dfe654
I've not tested the effects of change events on checkboxes as thoroughly as for radios across browsers. What about having the event names stored as properties on the instance so they could be relative to each type of object?

For example `.on(this.selectionEvent, function (e) {`