Script

jQuery(function($){
    var img = 'images/check.gif',
         img_on = 'images/check_on.gif';
    $(':checked').removeAttr('checked');
    $('.checkImg input:checkbox').hide().after('<img src="' + img + '" />');
    $('.checkImg input:checkbox:hidden').next().toggle(function(){
        $(this).attr('src',img_on);
        $(this).prev().attr('checked','checked');
    },function(){
        $(this).attr('src',img);
        $(this).prev().removeAttr('checked');
    });
    $('label').click(function(){
        $(this).prev().trigger('click');
    });
    /*以下おまけ*/
    $('button').click(function(){
        var colorElm ='',
        colorElm2 = '';
        $('[name="color"]:checked').each(function(){
            colorElm += $(this).val();
        });
        $('[name="color2"]:checked').each(function(){
            colorElm2 += $(this).val();
        });
        alert('チェックされた値は「' + colorElm + '」と「' + colorElm2 + '」');
    });
});

HTML

<table summary="チェックボックスイメージ" id="formDemo">
    <tr>
        <td>（イメージ利用）カラー１：</td>
        <td class="checkImg">
            <input type="checkbox" id="test1" name="color" value="赤" /><label for="test1">赤</label>
            <input type="checkbox" id="test2" name="color" value="黄" /><label for="test2">黄</label>
            <input type="checkbox" id="test3" name="color" value="青" /><label for="test3">青</label>
        </td>
    </tr>
    <tr>
        <td>（デフォルト）カラー２：</td>
        <td class="noImg">
            <input type="checkbox" id="test4" name="color2" value="緑" /><label for="test4">緑</label>
            <input type="checkbox" id="test5" name="color2" value="黒" /><label for="test5">黒</label>
            <input type="checkbox" id="test6" name="color2" value="白" /><label for="test6">白</label>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="check"><button>チェックされた値は</button></td>
    </tr>
</table>

Demo