javascript - 使用复选框删除 lastIndexOf url

Question

我正在尝试创建一个 2checkout 立即购买按钮。为了将正确的产品放入购物车，您需要将产品 ID 传递到 URL 中。我正在尝试根据用户选中和取消选中复选框的方式构建 URL。

例如:

当用户选中复选框时，使用 &product_id= 将 URL 参数添加到基本 URL 中

$("#buynow").attr('href', function(){
    var baseURL = this.href;
    var newURL = baseURL + '&product_id=' + productID;
    return newURL;
})

用户取消选中该复选框，因此从 URL 中删除了产品 ID:

$("#buynow").attr('href', function(){
    var oldURL = this.href;
    var newURL = oldURL.substr(oldURL.lastIndexOf('&'));
    return url.replace( new RegExp(oldURL), '' );
})

我遇到的问题是我有多个复选框可以添加和删除 URL。

典型场景:

用户选中复选框 A product_id=1，然后选中复选框 B product_id1=2。

http://baseurl.com/sid=12345&product_id=1&product_id1=2

用户决定取消选中复选框 A。代码根据“&”删除 lastIndexOf，然后删除复选框 B 产品 ID。

我如何编写代码，使其不仅删除添加到 URL 的最后一个参数，而且根据产品 ID 知道要删除哪个产品。

希望这是有道理的。

Answer 1

这里是一个简单的例子，根据复选框的名称和值更新 href。

$(".url_p").change(function() {
  var href = "http://baseurl.com/";
  $(".url_p").each(function(i) {
    if (!$(this).is(":checked")) return;
    href += (href.indexOf("?")==-1 ? "?" : "&") + this.name + "=" + encodeURIComponent($(this).val());
  });
  console.log(href);
  $("#buynow").attr("href", href);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' class='url_p' name='product_id' value='100'>Product id
<br/>

<input type='checkbox' class='url_p' name='price' value='80'>Price
<br/>

<input type='checkbox' class='url_p' name='amount' value='1'>Amount
<br/>

<a id='buynow' href='#'>Buy Now</a>