mysql - Laravel 复选框过滤器 ajax

Question

我需要实现一个基于ajax的空缺复选框过滤器。因此，我在页面上有一些类别，当用户标记某些复选框时，结果 block 仅显示所选类别中的空缺。如果没有选中复选框，页面将显示所有类别中的所有职位空缺。

现在我有了当前的变体，但它不适用于复选框值数组，并且每次加载结果后复选框状态都会重置。

我现在拥有的:

我的 html 标记

    <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>

这是我的 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); 

}

和路线

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

Mb，现在为我的情况提供一些可行的例子。

更新 2 个新 .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

首先，为您的复选框指定相同的名称(数组表示法)和值:

<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>

在 search.js 中，循环遍历所有选中的复选框并收集数组中的值。然后该数组将被发布到服务器:

$(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);
        });            

    });

});

在 Controller 方法中，您可以获取类别数组并构建 where in 查询:

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

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

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