Transform HTML input checkboxes into simple tutorial and step-by-step guide systems
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Checkmate is a jQuery plugin to build simple step tutorial and step-by-step guide systems out of HTML checkbox inputs.

Browser Compatibility

Works well with Internet Explorer 9, and beyond. Internet Explorer 8 or below - use at your own risk.


  • Super easy setup
  • Create step-by-tutorial with simple HTML checkboxes in minutes
  • Increase engagement by giving users instant feedback via notifications
  • Automatically save tutorial progress through LocalStorage

Example of Checkmate in action Click here to see Checkmate in action.

Here's another example.




Checkmate will use any input with type="checkbox" that is a child of the element that is passed to the jQuery selector.


Created by Erik August Johnson originally for Cabin, the React/Redux Tutorial series, by Stream.

Latest Version

0.1.0: "Save your progress via localStorage" edition
0.0.2: "I've added some basic options" edition.
0.0.1: "I created this in an hour in my living room" edition.


bower install checkmate

Order your scripts like so:

<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/growl/javascripts/jquery.growl.js"></script>
<script src="../dist/jquery.checkmate.js"></script>

jQuery Options

Here are the current options that can be passed via an object to Checkmate:

The title that will be used if a checkbox title is not specified via data-checkmate

Defaults to: 'Checkmate'
Input type: String

The placement of the jquery-growl alert/notification box.

Options: 'tl' | 'tr' | 'bl' | 'br' | 'tc' | 'bc'
Defaults to: 'br'
Input type: String

The duration of time (in milliseconds) the jquery-growl alert/notification box is visible:

Defaults to: 2000
Input type: Integer

Saves a record of checkboxes checked for a page via Local Storage. Works well in Internet Explorer 9, and beyond.
For a checkbox to be saved, either the id attribute or data-checkmate-id attribute must be set for the checkbox.

Defaults to: false
Input type: Boolean (True or False)

An example of setting options:

  defaultTitle: "Cabin",
  growlDuration: 1000,
  saveProgress: true

Markup-Based Options

The following can be set as attributes:

data-checkmate The title of any checkbox can be set by using the data-checkmate attribute. Something like:

data-checkmate="Example Title"

data-checkmate-id Can be used to set a unique id for a checkbox - which is used to store the completion progress, if saveProgress is set to true.


Checkmate is a jQuery plugin.

jQuery Growl
Growl is used for the notification/alerts on checkbox change.