Schneller Tipp: Persist Checkbox Checked Status nach der Seite Reload

Dieses Tutorial zeigt, wie man Kontrollkästchen auf einer Webseite erstellen, um sich auch nach einer Seite zu aktualisieren oder Browserverschlüsse zu überprüft/deaktiviert. Dies wird mithilfe der Browser -API des Browsers erreicht, wodurch die Benutzererfahrung durch Aufrechterhaltung der Benutzereinstellungen verbessert wird. localStorage

Die Technik ist besonders nützlich für Einstellungen wie Standortpräferenzen (z. B. Öffnen von Links in neuen Registerkarten, Versteckelemente). Am Ende wird eine Demo bereitgestellt.

Schlüsselpunkte:

Persistente Kontrollkästchenzustände verbessern die Benutzererfahrung, indem Sie sich an die Auswahl über Seite nachgeladen werden.
• In JavaScript liefert im Browser des Benutzers einen anhaltenden Speicherplatz, wobei Daten auch nach dem Schließen und Wiedereröffnen des Browsers beibehalten. localStorage
Eine Funktion "Alle deaktivieren" kann für eine bequeme Massenauswahl hinzugefügt werden, wobei der Zustand auch in
• gespeichert ist. localStorage
• ist für nicht sensitive Daten geeignet; Vermeiden Sie es, Anmeldeinformationen oder persönliche Informationen zu speichern. localStorage

Kontrollkästchen HTML:

Die anfängliche HTML enthält Kontrollkästchen mit zugehörigen Beschriftungen, die zur Leichtigkeit des Stylings gruppiert sind:

<code class="language-html"><div id="checkbox-container">
  <div>
    <label for="option1">Option 1</label>
    <input type="checkbox" id="option1">
  </div>
  <div>
    <label for="option2">Option 2</label>
    <input type="checkbox" id="option2">
  </div>
  <div>
    <label for="option3">Option 3</label>
    <input type="checkbox" id="option3">
  </div>
  <button>Check All</button>
</div></code>

Beschriftungen sind für die Barrierefreiheit von entscheidender Bedeutung. Die Auswahl über Beschriftungsklicks.

JavaScript (mit JQuery):

jQuery vereinfacht die DOM -Manipulation. Fügen Sie es über ein CDN ein:

Das JavaScript -Kontrollkästchen -Status ändert sich, speichert sie in

<code class="language-html"></code>

und stellt sie auf Seite "Laden" wieder her:

localStorage

Dieser Code verwaltet effizient den Speicher und aktualisiert den Text "Alle" alle "Alle".

<code class="language-javascript">var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");
var $button = $("#checkbox-container button");

function allChecked(){
  return $checkboxes.length === $checkboxes.filter(":checked").length;
}

function updateButtonStatus(){
  $button.text(allChecked()? "Uncheck all" : "Check all");
}

function updateStorage(){
  $checkboxes.each(function(){
    formValues[this.id] = this.checked;
  });
  formValues["buttonText"] = $button.text();
  localStorage.setItem("formValues", JSON.stringify(formValues));
}

$checkboxes.on("change", function(){
  updateStorage();
  updateButtonStatus();
});

function handleButtonClick(){
  $checkboxes.prop("checked", allChecked()? false : true);
  updateStorage();
  updateButtonStatus();
}

$button.on("click", handleButtonClick);


$.each(formValues, function(key, value) {
  if (key !== "buttonText") {
    $("#" + key).prop('checked', value);
  }
});

$button.text(formValues["buttonText"]);
</code>

Alle Funktionen überprüfen/deaktivieren:

Die Schaltfläche "Alle" prüfen "Umschaltet alle Kontrollkästchen und Updates

.

localStorage

Demo:

Eine funktionierende Demo, die das persistente Kontrollkästchen -Verhalten zeigt [hier] (Link zu Codepen -Demo - Ersetzen Sie, falls dies verfügbar ist).

.

Schlussfolgerung:

Diese Methode nutzt effektiv

, um anhaltende Kontrollkästchen zu erstellen, die Benutzererfahrung zu verbessern und eine saubere Implementierung einer Funktion "Alle deaktivieren" zu erstellen. Denken Sie daran, dass

nicht für sensible Daten geeignet ist. Die bereitgestellten FAQs bieten weitere Klärung zu verschiedenen Aspekten dieser Technik. localStorage

Das obige ist der detaillierte Inhalt vonSchneller Tipp: Persist Checkbox Checked Status nach der Seite Reload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!