Filtering results using css/js checkbox

I want to redesign a checkbox using a css/js (filter-item on css) :

$link .= '<div class="sidebar-link"><input type="checkbox" name="filter" value="'.$category['name'].'" class="filter-item">'.ucfirst($category['name']).'</div>';

Everything is ok on it, except that the results are not filtering anymore with my function :

$(document).on('click', '.filter-item', function(e) {
    var filters = '';
    $('[name=filter]:checked').each(function() {
        if (filters.length > 0) {
            filters += ',';
        }
        filters += $(this).val();
    });
    var types = '';
    $('[name=type]:checked').each(function() {
        if (types.length > 0) {
            types += ',';
        }
        types += $(this).val();
    });
    exploreMultipleFilters(filters, types);
});

Well, I'm a newbie, but I think I have to change the 'click' function ?

Thanks to all.