If you're not against using an existing toolkit, jQuery UI Button can turn check boxes into custom-styled buttons that support the four basic visual states (plus one more hover state):

However, to be able to use that feature the way you want (using the value attribute as the label), you'll have to give id attributes to your check boxes, and add <label> elements that refer to these ids and expose their check box's value as their inner text. You can either change your markup by hand:

<input type="checkbox" id="nutri" name="nutri" value="select">
<label for="nutri">select</label>

Or modify it dynamically:

$("input:checkbox").each(function(index) {
    $("<label>").text(this.value)
                .attr("for", this.id = "checkbox" + index + 1)
                .insertAfter(this);
});

From there on, it's as simple as calling button() on the check box or buttonset() on a container. Of course, if none of the default jQuery UI themes are appropriate for your project, you can design your own style for each visual state with ThemeRoller.

You can find a live demo in this fiddle.