radiocheck v0.0.1

What is this

This is some JS that lets you tag some checkboxes that you want to act like radio buttons. It's version 0.0.1 and I've only tried it on the latest versions of chrome, safari, and firefox. It is not production ready so use with care.

Why the **** don't you just use a radio button?

Because someone who pays you money told you it had to be a checkbox, and despite your most valiant efforts you could not convince them otherwise. They probably want to be able to select a thing that is optional, BUT if they do select it, there can only be one. ¯_(ツ)_/¯

Should I ever use this when I can just use a radio button and don't have some weird situation where I HAVE to use checkboxes?

No.

But what if...

FOR THE LOVE OF ALL THAT IS GOOD AND HOLY NO!!!!!!!!!

Usage

Use the radiocheck data attribute on a group of checkboxes that should only have one selected at any time:

<label>One</label>
<input data-radiocheck=true type='checkbox'/>

<label>Two</label>
<input data-radiocheck=true type='checkbox'/>

<label>Three</label>
<input data-radiocheck=true type='checkbox'/>

If you have a group of checkboxes that could have more checkboxes added to the group, use radiocheck_async inside of a containing element with the attribute radiocheck_async_fields. You may have multiple groups, if you need multiple groups of wannabe radio buttons.

<!-- these 2sets of fields validate independently -->
<div data-radiocheck-async_fields=true>
  <label>One</label>
  <input data-radiocheck=true type='checkbox'/>

  <label>Two</label>
  <input data-radiocheck=true type='checkbox'/>

  <label>Three</label>
  <input data-radiocheck=true type='checkbox'/>
</div>

<div data-radiocheck-async_fields=true>
  <label>One</label>
  <input data-radiocheck=true type='checkbox'/>

  <label>Two</label>
  <input data-radiocheck=true type='checkbox'/>

  <label>Three</label>
  <input data-radiocheck=true type='checkbox'/>
</div>

Dependencies

None. If it doesn't work in your browser, you're probably on IE1.