Question

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

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

我现在拥有的：

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

        });

});

控制器

    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');

对于我的情况，你现在有一些可行的例子。

更新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);
        });            

    });

});

在您的控制器方法中，您可以获取类别数组并构建where in查询：

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

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

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

Laravel复选框过滤ajax

1 个答案: