ページの更新後にクリックしたチェックボックスの状態を維持する

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

私はHTML5ウェブストレージ（高速で安全です）に行く傾向がありますが、クッキーもその仕事をします。ここでは、まだこのに興味があるならHTML5 http://www.w3schools.com/html5/html5_webstorage.asp

Answer 2

を使用していくつかのサンプルへのリンクではないはずですが、私は少し前に同じ問題を抱えていたし、チェックボックスを持続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：

<body onload="restorePersistedCheckBoxes();">