body {
padding: 40px;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
font-size: 1em;
}

ul#albums {
width: 220px;
height: 160px;
overflow-y: auto;
overflow-x: hidden;
list-style: none;
padding: 0;
border: 1px solid #CCC;
}

#albums li label {
display: block;
border-bottom: 1px solid #DDD;
padding: 4px 4px 4px 4px;
color: #000;
outline: none;
}

#albums li label:hover {
color: #000;
background-color: #EEE;
}

#albums li label.selected {
color: #FFF;
background-color: #CCC;
}

#albums li label .checkbox {
top: 2px;
left: 2px;
}

The problem with the code you posted is two-fold: it assumes the link already has the correct class for its state, and it flips the checkbox state based on the current state.

The problem with the first is that a lot of browsers try to maintain the state of the form on refresh. This means that if you tick some boxes and then refresh, the selected items would be ticked, but not have the correct class. With your code, if you then clicked, it would toggle to the wrong class again. The solution to this would be to make sure the items have the correct class when the page loads – I’ll look into adding that.

The problem with the second is that we deal with two different events – clicking the link and clicking the checkbox itself. When you click the checkbox, it changes state automatically before this code gets run. Therefore if you simply toggle the state, it will toggle back to its original state. If you try using preventDefault(), the checkbox will still change state before the code is run, the code will toggle it off again, and then the preventDefault() runs, also turning it off (preventing the default behaviour) so it doesn’t help. This is why I treat the link and the checkbox event separately and pass the desired state to applyChecked().

If we implement the class checking on page load as I mentioned earlier, then the following code should work:

$link.toggleClass(’selected’);
$checkbox.attr(’checked’, checked);

if (checked)
{
$link.addClass(‘selected’);
$checkbox.attr(‘checked’, true);
} else {
$link.removeClass(‘selected’);
$checkbox.attr(‘checked’, false);
}

==

$link.toggleClass(‘selected’);
$checkbox.attr(‘checked’, !($checkbox.attr(‘checked’)));

?