保持页面刷新后选中复选框 [英] keep checkboxes checked after page refresh

问题描述

我有两个复选框。当它们中的任何一个被点击/检查并且搜索按钮被点击时，将获取它们的值并且作为querystring传递到url并且刷新与所传递的查询值匹配的返回结果的页面。
like this：mysite.com/result.aspx?k=\"HospitalOROfficeOREmergency

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"

我可以抓取值后k =。我有医院或办公室或紧急捕获和存储在一个变量。现在，我需要在页面重新加载后基于这些值重置复选框的选中状态，并且忘记了控件的先前状态。我不能再移动任何比这更远。有人可以帮我吗？

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?

  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:

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&#160;&#160;
        <input name="LocType" type="checkbox"  value="Office"/>  PHYSICIAN OFFICES&#160;&#160;
        <input name="LocType" type="checkbox"  value="Emergency"/>EMERGENCY CENTERS&#160;&#160;
        <input name="LocType" type="checkbox"  value="Out-Patient"/>OUT-PATIENT CENTERS&#160;&#160;
        <input name="LocType" type="checkbox" value="Facility"/>FACILITIES
    </div>
    <div class="searchBtnHolder"><a class="searchButton" href="#" type="submit" ><span>GO</span></a></div>
</div>

推荐答案

我遇到了同样的问题， HTML5本地存储。
为colect复选框的值添加一个函数

I've faced same problem, and my solution is HTML5 Local Storage. Add an function for colect checkboxes values

function(){
var data = $('input[name=checkboxName]:checked').map(function(){
        return this.value;
    }).get();
    localStorage['data']=JSON.stringify(data);
}

并使用onload函数检查复选框

And onload function to check checkboxes

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屋！