实现URL携带Checkbox值并自动加载对应Ajax数据

实现思路 #

1. 页面初始化阶段解析URL的hash片段，提取marka参数对应的取值列表
2. 根据提取到的数值匹配页面上的checkbox，自动设置选中状态
3. 触发checkbox的change事件，复用已有的Ajax查询逻辑完成数据加载

完整代码实现 #

JavaScript代码 #

$checkboxes = $('input[type=checkbox]');

// 页面加载时处理URL参数
$(document).ready(function() {
    // 解析hash中的参数（去掉开头的#）
    const hashParams = new URLSearchParams(window.location.hash.slice(1));
    const selectedMarkas = hashParams.get('marka')?.split(',') || [];
    
    // 匹配并勾选对应的checkbox
    $checkboxes.each(function() {
        if (selectedMarkas.includes(this.value)) {
            $(this).prop('checked', true);
        }
    });

    // 若有选中项，触发change事件执行查询
    if (selectedMarkas.length > 0) {
        $checkboxes.trigger('change');
    }
});

// 原有checkbox状态变更逻辑
$checkboxes.change(function(){
    window.location.hash = 'marka=' + $checkboxes.filter(':checked').map(function(){
        return this.value;   
    }).get().join(",");
    console.log(window.location.hash);
    // 此处保留你原有Ajax查询代码，无需修改
});

HTML代码 #

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
    <input class="custom-control-input common_selector marka" type="checkbox" id="marka_1" value="1">
    <label class="custom-control-label cz-filter-item-text" for="marka_1">Value 1 </label>
    <input class="custom-control-input common_selector marka" type="checkbox" id="marka_2" value="2">
    <label class="custom-control-label cz-filter-item-text" for="marka_2">Value 2 </label>
    <input class="custom-control-input common_selector marka" type="checkbox" id="marka_3" value="3">
    <label class="custom-control-label cz-filter-item-text" for="marka_3">Value 3 </label>
    <input class="custom-control-input common_selector marka" type="checkbox" id="marka_4" value="4">
    <label class="custom-control-label cz-filter-item-text" for="marka_4">Value 4 </label>
</div>

注意事项 #

• 修正了原HTML中Value 2对应的label的for属性错误（原marka_21改为marka_2），确保点击标签能正确选中checkbox
• 使用URLSearchParams解析参数，简化了hash字符串的处理逻辑，同时兼容现代浏览器
• 空参数场景已处理：若URL hash中无marka参数，页面保持原有功能正常运行

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