如何将不同分组复选框的选中值作为分组参数添加到URL字符串中

需求说明 #

现有多组分类复选框，需要根据选中状态生成URL参数，不同分类的参数用&分隔，同分类下的多个选中值用逗号分隔，预期效果如下：
URL?Fruits=banana,mango&Vegs=okra,patato&Rivers=ganga,whateverSelected

实现代码 #

HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="catName">Fruits</div>
    <div class="checkBoxWrap">
        <input class="input__field" type="checkbox" name="apple" id="input-5">
        <input class="input__field" type="checkbox" name="banana" id="input-6">
        <input class="input__field" type="checkbox" name="mango" id="input-7">
    </div>
</div>
<div class="wrapper">
    <div class="catName">Vegs</div>
    <div class="checkBoxWrap">
        <input class="input__field" type="checkbox" name="Okra" id="input-8">
        <input class="input__field" type="checkbox" name="Patato" id="input-9">
        <input class="input__field" type="checkbox" name="Tamato" id="input-10">
    </div>
</div>
<div class="wrapper">
    <div class="catName">Rivers</div>
    <div class="checkBoxWrap">
        <input class="input__field" type="checkbox" name="Ganga" id="input-11">
        <input class="input__field" type="checkbox" name="yamuna" id="input-12">
        <input class="input__field" type="checkbox" name="thames" id="input-13">
    </div>
</div>

JS逻辑 #

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        let params = [];
        // 遍历所有分类分组
        $(".wrapper").each(function() {
            let groupName = $(this).find('.catName').text().trim().replace(/\s/g, '');
            let checkedItems = [];
            // 收集当前分组下所有选中的复选框值
            $(this).find("input:checked").each(function() {
                checkedItems.push($(this).attr("name").replace(/\s/g, ''));
            });
            // 仅分组有选中项时加入参数列表
            if(checkedItems.length > 0) {
                params.push(`${groupName}=${checkedItems.join(',')}`);
            }
        });
        // 拼接生成最终URL
        let finalUrl = "example.com?" + params.join('&');
        console.log(finalUrl);
    });
});

逻辑说明 #

• 按wrapper节点遍历所有分类，避免不同分类的选中值混杂
• 每个分类单独收集选中的复选框name值，无选中项的分类不会生成冗余参数
• 最后将所有有效参数段用&拼接，完全匹配预期的URL格式

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