首页 > 解决方案 > 根据单击的复选框进行过滤

问题描述

我想根据用户单击的复选框过滤产品。我想附加复选框值并将其显示在 URL 中,并根据 URL 中的值过滤产品。我使用过onChange="this.form.submit()",但每次我选中复选框时,它都会用 URL 中的新值替换旧值。如何附加所有这些值并根据这些值进行过滤。

<form action="{{route('filter')}}" method="GET"
>  

<div class="container">
    <div class="row">


         <div class="col-md-4">
            Search
        <input type="checkbox" name="category_id['samsung']" class="form-control" value="1" onChange="this.form.submit(){{ request()->filled('category_id.samsung') ? 'checked' :''}}">Samsung

        <input type="checkbox" name="category_id['android']" class="form-control" value="2"onChange="this.form.submit(){{ request()->filled('category_id.android') ? 'checked' :''}}" >Android

        <input type="checkbox" name="category_id['apple']" class="form-control" value="3" onChange="this.form.submit(){{ request()->filled('category_id.apple') ? 'checked' :''}}">Apple
        </div>
    </form>

我的网址是浏览器是:

http://localhost:8000/?category_id%5B%27samsung%27%5D=1

http://localhost:8000/?category_id%5B%27android%27%5D=2

http://localhost:8000/?category_id%5B%27apple%27%5D=3

当我选中另一个复选框时,值是 url 更新,实际上我需要附加它

标签: phplaravellaravel-5.8

解决方案


正如评论中所建议的,category_id[]用作每个输入的名称属性。然后 URL 变为http://localhost:8000/?category_id[]=1.

问题仍然存在,在每个页面加载时,复选框都会被清除。可以在以下条件下预先选择它们:

is_array(request()->input('category_id')) && 
in_array('1', request()->input('category_id')) ? 'checked' : ''

现在可以对多个项目进行过滤,URL 变成这样:

http://localhost:8000/?category_id[]=1&category_id[]=2

这是一个完整的解决方案:

<form action="{{ route('filter') }}" method="GET">  
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                Search
                <input type="checkbox" name="category_id[]" class="form-control" value="1" onChange="this.form.submit()" {{ is_array(request()->input('category_id')) && in_array('1', request()->input('category_id')) ? 'checked' : ''}}>Samsung
                <input type="checkbox" name="category_id[]" class="form-control" value="2" onChange="this.form.submit()" {{ is_array(request()->input('category_id')) && in_array('2', request()->input('category_id')) ? 'checked' : ''}}>Android
                <input type="checkbox" name="category_id[]" class="form-control" value="3" onChange="this.form.submit()" {{ is_array(request()->input('category_id')) && in_array('3', request()->input('category_id')) ? 'checked' : ''}}>Apple
            </div>
        </div>
    </div>
</form>

推荐阅读