J'ai une page avec plusieurs cases à cocher. Je vérifie certains d'entre eux et aller à la page suivante, quand je reviens sur cette page, ces cases doivent rester vérifiés comme ils l'étaient avant de naviguer vers une autre page. Vous avez besoin de le faire avec Javascript. Tout indice ??
persistance des valeurs de cases à cocher
voix
2
3 réponses
voix 1
1
Vous aurez besoin de les persister entre les pages-demandes. Vous pouvez utiliser les sessions ou les cookies pour le faire. Quel type de serveur travaillez-vous, et avec quel type de langage côté serveur?
questions précédentes sur SO ont écrit d'adresse / lecture des cookies JavaScript.
voix 4
4
Si vous êtes limité à seulement JavaScript et aucun langage côté serveur, je pense que vous reste à lire / écrire des cookies pour maintenir l'état. Comme d'autres l'ont mentionné, les technologies côté serveur sont beaucoup mieux à cela, mais si vous devez:
Le code JavaScript exemple cookie (référence: http://www.quirksmode.org/js/cookies.html ):
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
voix 0
0
Je ne pense pas qu'il y ait ce moyen de faire raisonnablement compliquée sans avoir accès au code côté serveur, car au minimum que vous devez installer votre code et d' identifier également les contrôles HTML , par exemple afin de les vérifier. Je suis en donnant le code raisonnable qui fait ce que vous voulez ci - dessous.
Notes IMPORTANTES:
- Le code exige que chaque case est donnée un attribut distinct id.
- L'état de contrôle est stocké dans un cookie nommé « JS_PERSISTENCE_COOKIE ». Il serait préférable de stocker le nom de ce cookie dans une variable au lieu de coder en dur dans deux endroits séparés comme je l'ai fait. Quel genre de variable doit enregistrer le nom dépend de votre application et exigences.
- Il serait préférable d'emballer le code à l'intérieur d'un objet au lieu d'un tas de fonctions libres comme je l'ai fait. Cependant, ce n'est pas pertinent à votre question initiale.
- Après avoir cliqué sur quelques cases à cocher, vous pouvez simuler « naviguer vers la page » en appuyant sur CTRL + F5. F5 seule ne suffit pas.
Voici le code et quelques échantillons pour les tests HTML:
<body onload="restorePersistedCheckBoxes()">
<input type="checkbox" id="check1" onclick="persistCheckBox(this)" />
<input type="checkbox" id="check2" onclick="persistCheckBox(this)" />
<input type="checkbox" id="check3" onclick="persistCheckBox(this)" />
<input type="button" value="Check cookie"
onclick="alert(document.cookie)" />
<input type="button" value="Clear cookie"
onclick="clearPersistenceCookie()" />
<script type="text/javascript">
// 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;';
}
</script>
</body>