頁面刷新後保持單擊複選框狀態

用戶選中複選框並點擊選擇，結果顯示，但複選框會丟失它們的選中狀態，這會讓用戶感到困惑。我試圖在刷新頁面之後設置複選框狀態。我還沒有達到這個目標，但我希望它是可行的。有人能幫助我朝正確的方向發展嗎？頁面刷新後保持單擊複選框狀態

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); 
    } 


});

來源

2012-02-25 Anjana Sharma

正確的方向很可能是餅乾。 – adeneo 2012-02-25 14:23:12

我會更傾向於使用HTML5網絡存儲（更快，更安全），但cookies也可以完成這項工作。下面是一個使用HTML5 http://www.w3schools.com/html5/html5_webstorage.asp

來源

2012-02-25 14:36:43 Kurt

我有一個jQuery的功能，當複選框未選中時隱藏div。然而，當我刷新頁面複選框被再次檢查，我怎樣才能實現與該代碼的網絡存儲？ – 2012-06-20 07:00:47

不知道，如果你想繼續在這一些樣品的鏈接，但我前一陣有同樣的問題，結果發現，堅持複選框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);"/>

而且也是你口主體標記有載：

<body onload="restorePersistedCheckBoxes();">

來源

2013-01-22 02:36:47 Sam

頁面刷新後保持單擊複選框狀態

回答

相關問題