Laravel 复选框过滤器 ajax

Posted 2023-02-24

【中文标题】Laravel 复选框过滤器 ajax

【英文标题】：Laravel checkbox filter ajax

【发布时间】：2015-08-05 12:05:33

【问题描述】：

我需要实现一个基于 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 + ")");            
    );            

);

);

【参考方案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); 

【讨论】：

它有效，但它只显示来自 1 个类别的空缺，当我标记第二个复选框时，它只显示来自第 2 个类别的记录。似乎页面刷新，它正在丢失先前复选框的值。如何实现多选？

更新：刚刚添加了提交按钮，一切正常，但我需要在没有提交按钮的情况下执行此过滤器。

好的，我编辑了我的答案以满足您的要求。我将$('input[name="cat[]"]') 上的点击事件更改为更改事件。我刚刚意识到您的复选框隐藏在您的示例中，所以现在即使您单击复选框标签，事件也会触发。

一切正常，但我不明白为什么 ajax 总是发送 2 个帖子请求而不是 1 个？

能否请您编辑您的问题并提供更多代码（JS 部分）？