Question

我想为搜索创建复选框过滤器。
例如，我搜索sunglass。在结果页面，太阳镜来自所有品牌，搜索URL为：
http://www.my-site.com/?s=sunglass

当我检查Rayban时，我想在此网址的末尾添加一些参数，例如&brand=rayban。像：
http://www.my-site.com/?s=sunglass&brand=rayban
取消选中后，网址将恢复为原始状态?s=sunglass。

HTML代码是：

<input type="checkbox" name="brand" value="rayban"/>

jQuery代码是：

$('input[type="checkbox"]').on('change', function(e){
    var data = [],
        loc = $('<a>', {href:window.location})[0];
    $('input[type="checkbox"]').each(function(i){
    if(this.checked){
        data.push(this.name+'='+this.value);

    }
    });
    data = data.join('&');

    if(history.pushState){
        history.pushState(null, null, loc.pathname+'?'+data);
location.reload();
    }

有什么想法吗？

Answer 1

你可以尝试这样的事情。希望这会有所帮助。

＆＃13;

<!DOCTYPE html>
<html>

  <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
  
  $(function(){
 

  $('input[type="checkbox"]').on('change', function(e){
       
      var loc = location.href;
      loc = loc.split("&")[0]; // to get the URL till /?s=sunglass
      $('input[type="checkbox"]').each(function(i){
      if(this.checked){
         loc += "&" + $(this).attr("name") + "=" + $(this).attr("value");
         }
      });
      location.href = loc;
  });
 
});
  
</script>
  </head>

  <body>
<input type="checkbox" name="brand" value="rayban"/> 
 <input type="checkbox" name="brand" value="armani"/> 
  </body>

</html>

＆＃13;

如何使用jQuery和复选框添加url的参数结束？

1 个答案: