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">Item 3</label>
    <input type="checkbox" id="fourth" />
    <label for="fourth">Item 4</label>
</div>

With this markup, we actually have a functioning checklist UI, albeit, a less-than-usable one. We can use the toggling capability of the jQuery UI button widget to encapsulate the label and the checkbox together as a checklist item.

We'll introduce the following JavaScript code to collect our checkbox inputs and use their labels to assemble the toggle button widget.

$(function() {

    $( "input" ).button( { icons: { primary: "ui-icon-bullet" } } );

    $( "input" ).change( function( e ) {

        var button = $( this );

        if ( button.is( ":checked" ) ) {

            button.button( "option", {
                icons: { primary: "ui-icon-check" } 
            });

        }
        else {

            button.button( "option", {
                icons: { primary: "ui-icon-bullet" } 
            });

        }

    });

});

With that, you have a toggle-button checklist, complete with icons to assist in conveying the state. When the user clicks on the toggle-button, it goes into "on" state, which is depicted by the change in background color, and other theme properties. We've also added icons that toggle along with the button state.

Our event handler, fired when the DOM is ready, requires only one line of code to turn the input elements on the page into toggle buttons. Within the button constructor, we're specifying that the default icon to use is the ui-icon-bullet icon class from the theme framework. The button widget knows that we're creating a toggle button because of the underlying HTML element. Since these are checkboxes, the widget will change its behavior when the button is clicked—in the case of a checkbox, we want the button to give the appearance of toggling on and off. Additionally, the button widget knows which label belongs to which button based on the for attribute. For example, the label for for="first" will be assigned to the button with id="first".

Next we apply the change event handler to all our buttons. This handler is the same for each button, so we can bind it to all buttons at once. The job of this handler is to update the button icon. We don't have to change anything else about the button state because the default button implementation will do that for us. All we need to do in our event handler is check the state on the checkbox itself. If checked, we show the ui-icon-check icon. Otherwise, we show the ui-icon-bullet icon.