O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required