Question

I’m trying to create some step-by-step online instructions and I want users to check off step s that they complete as they go along.

Ideally, there would be a checkbox next to each step. When they click it, it will cross-out that step and show it as being completed.

Is there any plugins that do something like this?

Answer 1

You don’t really need a plugin. Let’s say you have this markup:

<ul>
  <li><input type="checkbox">Step 1</li>
  <li><input type="checkbox">Step 2</li>
  <li><input type="checkbox">Step 3</li>
  <li><input type="checkbox">Step 4</li>
</ul>

This will strike out the items when checked and remove it when unchecked:

$('[type="checkbox"]').click(function(){
    var element = $(this).parent();
    if ($(this).is(':checked')) {
       element.wrap('<del>');
    } else {
       element.unwrap('<del>');
    }
});

Demo: http://jsfiddle.net/awMhq/

Just make sure you have the correct CSS set up for <del> so it appears with a line through it, something like del {text-decoration: line-through; color:#f00}

You’ll have to decide what makes sense for you in order to save the progress from one page/step to the next.