Question

用户选择复选框并点击选择，结果显示，但随后复选框将失去其检查状态，这将使用户混淆他们检查的内容。我试图在页面刷新后预先设置复选框状态。我还没有能够实现这一点，但我希望它可行。有人可以帮助我朝正确的方向发展吗？

Emergency Centers<input name="LocType" type="checkbox"  value="Emergency"/>&#160; 
Out-Patient Centers<input name="LocType" type="checkbox"  value="Out-Patient"/>&#160; 
Facilities<input name="LocType" type="checkbox" value="Facility"/>
<div class="searchBtnHolder"><a class="searchButton" href="#" type="submit"><span>Search</span></a></div>



$(document).ready(function() {  
    var url = "http://mysite/sites/dev/contact-us/Pages/LocationSearchTestPage.aspx?s=bcs_locations"; 
    $('a.searchButton').click(function(){ 

    var checkboxValues = $("input[name=LocType]:checked").map(function() {
    return "\"" + $(this).val() + "\"";}).get().join(" OR ");

       //Now use url variable which has all the checked  LocType checkboxes values and jump to url 

       window.location = url+'&k='+checkboxValues;

    });

    //Keep the selected checked on page redirect
    var value = window.location.href.match(/[?&]k=([^&#]+)/) || [];
    if (value.length == 2) {
        $('input[name="LocType"][value="' + value[1] + '"]').prop('checked', true);
    }  


});

Answer 1

不确定你是否仍然对此感兴趣，但是我前一段时间遇到了同样的问题，并且发现了这个持久化复选框的JS的通用部分：

// This function reads the cookie and checks/unchecks all elements
// that have been stored inside. It will NOT mess with checkboxes 
// whose state has not yet been recorded at all.
function restorePersistedCheckBoxes() {
    var aStatus = getPersistedCheckStatus();
    for(var i = 0; i < aStatus.length; i++) {
        var aPair = aStatus[i].split(':');
        var el = document.getElementById(aPair[0]);
        if(el) {
            el.checked = aPair[1] == '1';
        }
    }
}

// This function takes as input an input type="checkbox" element and
// stores its check state in the persistence cookie. It is smart
// enough to add or replace the state as appropriate, and not affect
// the stored state of other checkboxes.    
function persistCheckBox(el) {
    var found = false;
    var currentStateFragment = el.id + ':' + (el.checked ? '1' : '0');
    var aStatus = getPersistedCheckStatus();
    for(var i = 0; i < aStatus.length; i++) {
        var aPair = aStatus[i].split(':');
        if(aPair[0] == el.id) {
            // State for this checkbox was already present; replace it
            aStatus[i] = currentStateFragment;
            found = true;
            break;
        }
    }
    if(!found) {
        // State for this checkbox wasn't present; add it
        aStatus.push(currentStateFragment);
    }
    // Now that the array has our info stored, persist it
    setPersistedCheckStatus(aStatus);
}

// This function simply returns the checkbox persistence status as
// an array of strings. "Hides" the fact that the data is stored
// in a cookie.
function getPersistedCheckStatus() {
    var stored = getPersistenceCookie();
    return stored.split(',');
}

// This function stores an array of strings that represents the 
// checkbox persistence status. "Hides" the fact that the data is stored
// in a cookie.
function setPersistedCheckStatus(aStatus) {
    setPersistenceCookie(aStatus.join(','));
}

// Retrieve the value of the persistence cookie.
function getPersistenceCookie()
{
  // cookies are separated by semicolons
  var aCookie = document.cookie.split('; ');
  for (var i=0; i < aCookie.length; i++)
  {
    // a name/value pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split('=');
    if ('JS_PERSISTENCE_COOKIE' == aCrumb[0]) 
      return unescape(aCrumb[1]);
  }
  return ''; // cookie does not exist
}

// Sets the value of the persistence cookie.
// Does not affect other cookies that may be present.
function setPersistenceCookie(sValue) {
    document.cookie = 'JS_PERSISTENCE_COOKIE=' + escape(sValue);
}

// Removes the persistence cookie.
function clearPersistenceCookie() {
    document.cookie = 'JS_PERSISTENCE_COOKIE=' +
                      ';expires=Fri, 31 Dec 1999 23:59:59 GMT;';
}

只需确保您的复选框附有onChange= persistCheckBox(this);即可例如。

<label for= "LocType">User Preference</label>
<input name= "LocType" type= "checkbox" onChange= persistCheckBox(this);"/>

还有一个onLoad在你的开场身份标签中：

<body onload="restorePersistedCheckBoxes();">

Answer 2

我更倾向于使用HTML5网络存储（更快，更安全），但Cookie也可以完成这项工作。以下是使用HTML5 http://www.w3schools.com/html5/html5_webstorage.asp

的一些示例的链接

保持单击复选框在页面刷新后显示

2 个答案: