Html 表单提交后通过URL发送参数

我有一个简单的产品选择表单，用户可以选择要购买多少产品。根据他的选择，我需要在URL中附加他的选择。如果他选择Product1和Product2，submit按钮应使用以下参数将这两种产品添加到购物车中

https://example.com?add-到购物车=10,20

这是我的表格示例

<form action="/action_page.php">
  <input type="checkbox" id="10" name="vehicle1" value="Bike">
  <label for="vehicle1"> Product 1</label><br>
  <input type="checkbox" id="20" name="vehicle2" value="Car">
  <label for="vehicle2"> Product 2</label><br>
  <input type="checkbox" id="30" name="vehicle3" value="Boat">
  <label for="vehicle3"> Product 3</label><br><br>
  <input type="submit" value="Submit">
</form> 

产品1

产品2

产品3

我怎样才能做到这一点

---

发现类似的内容，但不知道如何根据我的示例进行修改。

这将重定向到example.com？add to cart=10,20

<script>
    $('form').on('submit', function(e){
          e.preventDefault(); 
        
          let params = ''    
          const redirect_url = 'axample.com?add-to-cart'            
          let count = $('input[name^="vehicle"]:checked').length
          
          $('input[name^="vehicle"]:checked').each(function(index) {
                
                    params += $(this).attr('id')
                    
                    if(index !== count - 1) {
                        params += ','
                    } 
                
          });

        // Amend redirect url in form by adding fields from form
        window.location.href = redirect_url + '=' + params         
    });
<script>

$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
设params=''
const redirect_url='axample.com？添加到购物车'
let count=$（'input[name^=“vehicle”]：checked'）。长度
$（'input[name^=“vehicle”]：选中'）。每个（功能（索引）{
params+=$（this.attr（'id'））
如果（索引！==计数-1）{
参数+='，'
} 
});
//通过在表单中添加字段来修改表单中的重定向url
window.location.href=redirect_url+'='+参数
});