[fishbaitfood]

Hi all,

I have working toggle labels for adding/removing table rows.
These labels have a sprite checkbox background, which holds 4 different states:
- unchecked
- unchecked-highlight
- checked
- checked-highlight

These states need to appear when pressing and releasing a label, so mousedown and mouseup.
However, with the code below, there is no background change at all.
I've used classes for the different background-positions.

$("ul.checklist label").mousedown(function() {
	if ($(this).hasClass("checked")) {
		$(this).removeClass("checked").addClass("checked-highlight");
	}
	else if ($(this).hasClass("unchecked")) {
		$(this).removeClass("unchecked").addClass("unchecked-highlight");
	}
});

$("ul.checklist label").mouseup(function() {
	if ($(this).hasClass("checked-highlight")) {
		$(this).removeClass("checked-highlight").addClass("checked");
	}
	else if ($(this).hasClass("unchecked-highlight")) {
		$(this).removeClass("unchecked-highlight").addClass("unchecked");
	}
});

$("ul.checklist label").toggle(
	function() {
		$(this).removeClass("unchecked").addClass("checked");
		$(this).prev().attr("checked", true);
	}, function() {
		$(this).removeClass("checked").addClass("unchecked");
		$(this).prev().attr("checked", false);
	}
);

How do I make the mousedown and mouseup functions work?

Thanks already.