Laravel checkbox filter ajax

Question

I need to realize a checkbox filter for vacancies based on ajax. So I have some categories on page, and when user marks some checkboxes the result block shows only vacancies in selected categories. If there are no selected checkboxes page shows all vacancies in all categories.

Now I have my current variant, but it doesnt work with array of checkboxes values, and every time after loading results checkboxes states are resetting.

What I have now:

My html markup

    <div class="category">
        <input type="checkbox" name="category[]" id="cat1" value="1" style="display: none;">
        <label for="cat1" class='cat-check'>Category-1</label>
    </div>
    <div class="category">
        <input type="checkbox" name="category[]" id="cat2" value="2" style="display: none;">
        <label for="cat2" class='cat-check'>Category-2</label>
    </div>
    <div class="category">
        <input type="checkbox" name="category[]" id="cat3" value="3" style="display: none;">
        <label for="cat3" class='cat-check'>Category-3</label>
    </div>

This is my search.js

    $(document).ready(function () {

    $(':checkbox').click(function (e) {

        e.preventDefault();

        var cat = $(':checkbox:checked').val();

            $.post('/vacancies/searchcat', {cat: cat}, function(markup)
            {
                $('#search-results').html(markup);
            });            

        console.log(cat);

        });

});

Controller

    public function searchcat()
{

    $cat = \Input::get('cat');

    $cat = (int) $cat;

    $vacancies = \Vacancy::where('category_id', '=', $cat)->get();

    return \View::make('vacancies.empty')->with('vacancies', $vacancies); 

}

and route

Route::post('/vacancies/searchcat', 'SearchController@searchcat');

Mb you now some workable examples for my situation.

UPDATE 2 NEW .JS:

$(document).ready(function () {

var categories = [];

// Listen for 'change' event, so this triggers when the user clicks on the checkboxes labels
$('input[name="category[]"]').on('change', function (e) {

    e.preventDefault();
    categories = []; // reset 

    $('input[name="category[]"]:checked').each(function()
    {
        categories.push($(this).val());
    });

    $.post('/vacancies/searchcat', {categories: categories}, function(markup)
    {
        $('#search-results').html(markup);
        var count = $('#count').val(); // vacancies count, from hidden input   
        $(".page-title").html("(" + count + ")");            
    });            

});

});

Answer 1

First, give your checkboxes all the same name (array notation) and a value:

<div class="category">
    <input type="checkbox" name="cat[]" value="1" id="cat1" style="display: none">
    <label for="cat1" class='cat-check'>Category-1</label>
</div>
<div class="category">
    <input type="checkbox" name="cat[]" value="2" id="cat2" style="display: none;">
    <label for="cat2" class='cat-check'>Category-2</label>
</div>
<div class="category">
    <input type="checkbox" name="cat[]" value="3" id="cat3" style="display: none;">
    <label for="cat3" class='cat-check'>Category-3</label>
</div>

In search.js, loop over all checked checkboxes and collect the values in an array. This array will then be posted to the server:

$(document).ready(function () {

    var categories = [];

    // Listen for 'change' event, so this triggers when the user clicks on the checkboxes labels
    $('input[name="cat[]"]').on('change', function (e) {

        e.preventDefault();
        categories = []; // reset 

        $('input[name="cat[]"]:checked').each(function()
        {
            categories.push($(this).val());
        });

        $.post('/vacancies/searchcat', {categories: categories}, function(markup)
        {
            $('#search-results').html(markup);
        });            

    });

});

In your controller method, you can fetch the categories array and build a where in query:

public function searchcat()
{
    $categories = \Input::get('categories');

    $vacancies = \Vacancy::whereIn('category_id', $categories)->get();

    return \View::make('vacancies.empty')->with('vacancies', $vacancies); 
}