jQuery+Laravel筛选功能实现页面重载后保留checkbox、radio选中状态

方案1：后端渲染直接回填（推荐，兼容性更好） #

第一步：修正控制器代码，传递选中参数到视图 #

原控制器缺少返回视图并携带选中参数的逻辑，修正后代码如下：

public function search(Request $request)
{
    $type = $request->get('expertise'); 
    $availability = $request->get('available', []); // 给定默认空数组避免判空报错
  
    $users = User::where('type','dev')->where('is_approved', '=', 1);
    if (!empty($type)) {
        // 修正原错误逻辑：匹配用户选中的技术方向，不是固定写dev
        $users = $users->where('expertise', $type);
    }
    $users->when($availability, function ($query, $availability ) {
        return $query->where(function ($whereQuery) use ($availability ) {
            foreach ($availability as $item) {
                $whereQuery->orWhere('avaibility', 'LIKE', $item); 
            }
        });
    });
    $users = $users->get();
    // 把选中的筛选参数传递到前端视图
    return view('你当前页面的Blade路径', compact('users', 'type', 'availability'));
}

第二步：修改Blade模板，自动添加checked选中状态 #

在渲染单选、复选框时，直接判断当前值是否在选中参数列表里，动态加checked属性：

<div class="search">
    <input type="radio" name="expertise[]" value="backend" {{ old('expertise', $type ?? '') == 'backend' ? 'checked' : '' }} />后端开发
    <input type="radio" name="expertise[]" value="frontend" {{ old('expertise', $type ?? '') == 'frontend' ? 'checked' : '' }} />前端开发
</div>
<div class="avail">
    <p>
        <input type="checkbox" name="available[]" value="20" {{ in_array('20', old('available', $availability ?? [])) ? 'checked' : '' }} />20
    </p>
    <p>
        <input type="checkbox"  name="available[]" value="30" {{ in_array('30', old('available', $availability ?? [])) ? 'checked' : '' }} />30
    </p>
</div>

方案2：纯前端JS回填（无需修改后端逻辑） #

如果不想改动后端代码，可以在页面加载时直接解析URL里的筛选参数，手动给对应表单元素加选中状态，新增如下jQuery代码即可：

$(function(){
    // 解析URL中的参数
    const queryParams = new URLSearchParams(window.location.search);
    // 回填单选按钮状态
    const selectedExpertise = queryParams.get('expertise');
    if(selectedExpertise) {
        $(`input[name="expertise[]"][value="${selectedExpertise}"]`).prop('checked', true);
    }
    // 回填复选框状态
    const selectedAvailable = queryParams.getAll('available');
    selectedAvailable.forEach(val => {
        $(`input[name="available[]"][value="${val}"]`).prop('checked', true);
    });
});

现有代码bug修正 #

你当前的jQuery代码存在选择器错误，收集expertise选中值时，选择器写错为input[name="type[]"]，实际应该改为input[name="expertise[]"]，否则会导致技术方向的筛选参数收集失效。

内容的提问来源于stack exchange，提问作者David