Making simple checklists

Checklists are easy enough to do in plain old HTML, all you really need are some checkboxes and some labels beside them. If you're using a widget framework such as jQuery UI, however, we can enhance that list with ease. The button widget knows how to behave when applied to an input element of type checkbox. So let's start off with a basic list and see how we can apply the button widget to the input elements. We'll also see if we can take the user interactivity a step further with some state and icon enhancements.

Getting ready

Let's start by creating a simple HTML div to hold our checklist. Inside, each item is represented by an input element of type checkbox, along with a label for the element.

<div>
    <input type="checkbox" id="first" />
    <label for="first">Item 1</label>
    <input type="checkbox" id="second" />
    <label for="second">Item 2</label>
    <input type="checkbox" id="third" />
    <label for="third...