gpt4 book ai didi

javascript - 如何使用 jQuery 和复选框添加 url 参数末尾?

转载 作者:行者123 更新时间:2023-11-28 05:46:55 25 4
gpt4 key购买 nike

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

当我检查 Rayban 时,我想在此网址末尾添加一些参数,例如 &brand=rayban 。喜欢:
http://www.my-site.com/?s=sunglass&brand=rayban
当取消选中它时,URL 返回原始状态 ?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();
}

有什么想法吗?

最佳答案

您可以尝试类似的方法。希望这会有所帮助。

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

关于javascript - 如何使用 jQuery 和复选框添加 url 参数末尾?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38440238/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com