javascript 页面刷新后保持复选框被选中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9472590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
keep checkboxes checked after page refresh
提问by Anjana Sharma
I have a couple of checkboxes. when any of them are clickd/checked and the search button is clicked, will grab their values and pass to the url as querystring and refresh the page returning results matching the passed query values. like this: mysite.com/result.aspx?k="Hospital" OR "Office" OR "Emergency"
我有几个复选框。当它们中的任何一个被单击/选中并单击搜索按钮时，将获取它们的值并作为查询字符串传递给 url 并刷新页面，返回与传递的查询值匹配的结果。像这样：mysite.com/result.aspx?k="Hospital" OR "Office" OR "Emergency"
I am able to grab the values after 'k='. I have "Hospital" OR "Office" OR "Emergency" captured and stored in a variable. Now I need to reset the checked state of checkboxes based on these values after the page reloads and forgets the previous state of the controls. I couldn't move any further than this. Can someone help me?
我能够在“k=”之后获取值。我有“医院”或“办公室”或“紧急情况”被捕获并存储在一个变量中。现在我需要在页面重新加载并忘记控件的先前状态后根据这些值重置复选框的选中状态。我不能再进一步了。有人能帮我吗？
var checkedOnes=decodeURI(location.href.match(/\&k\=(.+)/)[1]);
if (value.length == 2) {
$('input[name="LocType"][value="' + value[1] + '"]').prop('checked', true);
}
This is how I am capturing the checkboxes values and passing to the URL:
这就是我捕获复选框值并传递给 URL 的方式：
var checkboxValues = $("input[name=LocType]:checked").map(function() {
return "\"" + $(this).val() + "\"";}).get().join(" OR ");
window.location= url+checkboxValues;
<div class="LocTypeChkBoxesSearch">
<div class="LocTypeChkBoxes">
<input name="LocType" type="checkbox" value="Hospital"/>HOSPITALS  
<input name="LocType" type="checkbox" value="Office"/> PHYSICIAN OFFICES  
<input name="LocType" type="checkbox" value="Emergency"/>EMERGENCY CENTERS  
<input name="LocType" type="checkbox" value="Out-Patient"/>OUT-PATIENT CENTERS  
<input name="LocType" type="checkbox" value="Facility"/>FACILITIES
</div>
<div class="searchBtnHolder"><a class="searchButton" href="#" type="submit" ><span>GO</span></a></div>
</div>
回答by Braggae
I've faced same problem, and my solution is HTML5 Local Storage. Add an function for colect checkboxes values
我遇到了同样的问题，我的解决方案是 HTML5 本地存储。添加收集复选框值的函数
function(){
var data = $('input[name=checkboxName]:checked').map(function(){
return this.value;
}).get();
localStorage['data']=JSON.stringify(data);
}
And onload function to check checkboxes
和 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');
}
}
It's work fine to me.
这对我来说很好。
回答by ShankarSangoli
Try this.
试试这个。
//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);
});
I am splitting the value of kby ORwhich will give all the values in an array. Next, loop through the array and find the corresponding checkbox by matching its value attribute and set its checkedproperty to trueusing propmethod.
我正在拆分kby ORwhich 将给出数组中的所有值的值。接下来，循环遍历数组并通过匹配其 value 属性并将其checked属性设置为trueusingprop方法找到相应的复选框。
回答by Jacob S
You shouldn't need JavaScript for this. You can check the $_GET parameters in your back-end code, and serve the page with the proper form element attributes.
您不应该为此需要 JavaScript。您可以检查后端代码中的 $_GET 参数，并为页面提供正确的表单元素属性。
In PHP, for example:
在 PHP 中，例如：
<input name="LocType" type="checkbox" value="Facility" <?php if (isset($_GET['LocType'] && $_GET['LocType'] == 'Facility') { ?> checked="checked" <?php } ?> /> FACILITIES
