Javascript 页面刷新后保持复选框处于选中状态
我有几个复选框。当单击其中任何一个并选中搜索按钮时,将获取它们的值并作为querystring传递到url,并刷新返回与传递的查询值匹配的结果的页面。 比如:mysite.com/result.aspx?k=“医院”或“办公室”或“急诊” 我能够获取“k=”之后的值。我将“医院”或“办公室”或“紧急情况”捕获并存储在变量中。现在,我需要在页面重新加载并忘记控件以前的状态后,根据这些值重置复选框的选中状态。我不能再往前走了。有人能帮我吗Javascript 页面刷新后保持复选框处于选中状态,javascript,jquery,state,checkbox,persist,Javascript,Jquery,State,Checkbox,Persist,我有几个复选框。当单击其中任何一个并选中搜索按钮时,将获取它们的值并作为querystring传递到url,并刷新返回与传递的查询值匹配的结果的页面。 比如:mysite.com/result.aspx?k=“医院”或“办公室”或“急诊” 我能够获取“k=”之后的值。我将“医院”或“办公室”或“紧急情况”捕获并存储在变量中。现在,我需要在页面重新加载并忘记控件以前的状态后,根据这些值重置复选框的选中状态。我不能再往前走了。有人能帮我吗 var checkedOnes=decodeURI(lo
var checkedOnes=decodeURI(location.href.match(/\&k\=(.+)/)[1]);
if (value.length == 2) {
$('input[name="LocType"][value="' + value[1] + '"]').prop('checked', true);
}
这就是我捕获复选框值并传递到URL的方式:
var checkboxValues = $("input[name=LocType]:checked").map(function() {
return "\"" + $(this).val() + "\"";}).get().join(" OR ");
window.location= url+checkboxValues;
医院 家
医生办公室
应急中心
门诊中心
设施
试试这个
//Split the url parameter value and get all the values in an array
var checkedOnes = decodeURI(location.href.match(/\&k\=(.+)/)[1]).split(" OR ");
//Find all the checkbox with name="LocType" and cache them in local variable
var $checkBoxes = $('input[name=LocType]');
//Loop through the array and find the corresponding checkbox element using filter
$.each(checkedOnes, function(i, val){
$checkBoxes.filter('value=[' + $.trim(val.replace(/\"/g, '')) +']').prop('checked', true);
});
我将
k
的值拆分为或
,这将给出数组中的所有值。接下来,循环遍历数组,通过匹配其value属性找到相应的复选框,并使用prop
方法将其checked
属性设置为true
。您不应该需要JavaScript。您可以检查后端代码中的$\u GET参数,并为页面提供适当的表单元素属性
例如,在PHP中:
<input name="LocType" type="checkbox" value="Facility" <?php if (isset($_GET['LocType'] && $_GET['LocType'] == 'Facility') { ?> checked="checked" <?php } ?> /> FACILITIES
我也面临同样的问题,我的解决方案是HTML5本地存储。
为colect复选框值添加函数
function(){
var data = $('input[name=checkboxName]:checked').map(function(){
return this.value;
}).get();
localStorage['data']=JSON.stringify(data);
}
和onload函数来选中复选框
function(){
if(localStorage&&localStorage["data"]){
var localStoredData=JSON.parse(localStorage["data"]);
var checkboxes=document.getElementsByName('checkboxName');
for(var i=0;i<checkboxes.length;i++){
for(var j=0;j<localStoredData.length;j++){
if(checkboxes[i].value==localStoredData[j]){
checkboxes[i].checked=true;
}
}
}
localStorage.removeItem('data');
}
}
function(){
if(localStorage&&localStorage[“数据”]){
var localStoredData=JSON.parse(localStorage[“data”]);
var checkbox=document.getElementsByName('checkboxName');
对于(var i=0;我有没有考虑过改用localStorage?还不是所有浏览器都支持html5???检查cookies,你必须将它们实际保存在我认为合适的地方,因为你指出服务器端已退出,会话似乎不是一个选项。除非你在“ea”中有此变量,否则这将如何获得所有复选框ch'function?var$checkbox=$('input[name=LocType]);您不必将其保存在每个循环中。我将其保存在外部并将结果缓存到变量中的原因是为了避免在循环中一次又一次地找到所有的复选框。整个逻辑必须在文档中。ready()?它不起作用。我知道我已经接近了(在运行每个循环之前,是否可以检查checkedOne
的值?确保在$(document).ready(function(){..})
中运行此代码,以便在尝试查找和设置已检查的元素之前,这些元素可用。
function(){
if(localStorage&&localStorage["data"]){
var localStoredData=JSON.parse(localStorage["data"]);
var checkboxes=document.getElementsByName('checkboxName');
for(var i=0;i<checkboxes.length;i++){
for(var j=0;j<localStoredData.length;j++){
if(checkboxes[i].value==localStoredData[j]){
checkboxes[i].checked=true;
}
}
}
localStorage.removeItem('data');
}
}