2016-07-18 5 views
1

検索用のチェックボックスフィルタを作成したいと思います。
たとえば、sunglassについて検索しています。結果ページでは、サングラスブランド、および検索URLのすべてからのものである:
http://www.my-site.com/?s=sunglass

私はRaybanをチェックするとき、私はこのURLの末尾に&brand=raybanのようないくつかのパラメータを追加します。次のようになります。
http://www.my-site.com/?s=sunglass&brand=rayban
チェックを外すと、元の状態に戻る?s=sunglassに戻ります。
jQueryとcheckboxでURLのパラメータの終わりを追加するには?

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(); 
    } 

任意のアイデア?

答えて

0

このようなものを試すことができます。これが役立ちます。

<!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>

関連する問題