suchen

Heim >Web-Frontend >js-Tutorial >Ausgewähltes Kontrollkästchen auf einer anderen Seite mit JavaScript anzeigen?

Ausgewähltes Kontrollkästchen auf einer anderen Seite mit JavaScript anzeigen?

WBOY
WBOYnach vorne
2023-09-13 11:09:08735Durchsuche

使用 JavaScript 在另一个页面上显示选定的复选框？

In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript alle Kontrollkästchen auf anderen Seiten erhalten. Ein Kontrollkästchen ist ein Auswahltyp, ein binärer Auswahltyp, der wahr oder falsch ist. Es handelt sich um eine Option in Form einer auf der Seite dargestellten GUI, mit der wir mehr Input vom Benutzer erhalten können. True, wenn ein Kontrollkästchen aktiviert ist, was bedeutet, dass der Benutzer den Wert ausgewählt hat. Wenn es deaktiviert ist, bedeutet dies, dass der Benutzer den Wert nicht ausgewählt hat.

Der Unterschied zwischen Kontrollkästchen und Optionsfeldern besteht darin, dass der Benutzer mit Optionsfeldern nur einen Wert auswählen kann, während der Benutzer mit Kontrollkästchen mehrere Werte auswählen kann.

Checkbox-Beispiel

<html>
<body>
   <input type="checkbox" value="false" onchange="alert('checked')"/>Example of checkbox <br/>
</body>
</html>

Anhand der obigen Ausgabe können Sie erkennen, dass das Kontrollkästchen aktiviert ist, was anzeigt, dass der Benutzer den Wert ausgewählt hat.

Die JSON.parse()-Methode akzeptiert Argumente immer im String-Format (d. h. wir müssen den Wert in einfache Anführungszeichen setzen).

Beispiel

Sehen wir uns ein Programmbeispiel an: 

<html>
<body>
   <form>
      <h1>Print checked button values.</h1> <hr/>
      <big>Select your favourite fruits: </big><br />
      <input type="checkbox" name="inputCheck" value="Apple" />Apple<br />
      <input type="checkbox" name="inputCheck" value="Mango" />Mango<br />
      <input type="checkbox" name="inputCheck" value="Banana" />Banana<br />
      <input type="checkbox" name="inputCheck" value="Orange" />Orange<br />
      <p>
         <input type="submit" id="submitBtn" value="submit" onclick="printChecked()"/>
      </p>
   </form>
   <script type="text/javascript">
      function printChecked() {
         var items = document.getElementsByName("inputCheck");
         var selectedItems = "";
         for (var i = 0; i < items.length; i++) {
            if (items[i].type == "checkbox" && items[i].checked == true){
               selectedItems+=items[i].value+"";
            }
         }
         alert(selectedItems);
      }
   </script>
</body>
</html>

Anhand der Ausgabe können Sie erkennen, dass wir die ausgewählten Kontrollkästchen, die in der Warnmeldung angegeben sind, auf derselben Seite drucken. Lassen Sie uns zunächst das Konzept der lokalen Speicherung verstehen.

Lokalen Speicher in JavaScript verwenden

LocalSorage ist eine Art Datenspeicherung in Webbrowsern. Über diese Website können Daten gespeichert werden. Die Daten bleiben immer gespeichert und verschwinden nicht, wenn Sie Ihren Browser schließen.

Eine weitere Option sind Cookies, die ebenfalls zum Speichern von Website-Daten verwendet werden. Diese Speichergrenze liegt bei ca. 2 MB im Browser, während localStorage über 5 MB Speicher verfügt, was hinsichtlich der Cookie-Speichergröße größer ist

Um localStorage effektiv und sicher nutzen zu können, gibt es einige Begriffe, die Benutzer beachten sollten.

  • Nicht sicher bei der Speicherung sensibler Daten wie Passwörter und anderer Informationen, die Benutzer nicht öffentlich weitergeben sollten.

  • Werden die Daten im Browser selbst und nicht auf dem Server gespeichert? Und seine Operationen sind synchron, das heißt, eine Operation nach der anderen wird sequentiell verarbeitet.

  • Es verfügt über eine größere Speicherdatenkapazität im Vergleich zur Cookie-Speichergröße.

  • Fast alle modernen Browser unterstützen es und sind mit den neuesten Versionen kompatibel.

Überprüfen Sie die Kompatibilität des LocalStorage-Browsers

Um zu überprüfen, ob Ihr Browser localStorage unterstützt, führen Sie den folgenden Code in der Browserkonsole aus. Wenn er nicht definiert ist, bedeutet dies, dass Ihr Browser localStorage unterstützt.

Beispiel

<html>
<body>
   <script type="text/javascript">
      if (typeof(Storage) !== "undefined") {
         document.write("Your browser support localStorage.")
      } 
      else {
         document.write("Your browser doesn't support localStorage.")
      }
   </script>
</body>
</html>

Die verwendete localStorage-Methode

1. setItem()

Diese Methode wird verwendet, um Daten zum Speicher hinzuzufügen. Wir übergeben den Schlüssel und den Wert an diese Methode, um Daten hinzuzufügen. 

localStorage.setItem("name", "Kalyan");

2. GetItem()

Diese Methode wird verwendet, um im Speicher vorhandene Daten abzurufen oder abzurufen. Wir übergeben den Schlüssel an diese Methode, um den diesem Schlüssel zugeordneten Wert abzurufen. 

localStorage.getItem("name");

3. Artikel löschen()

Diese Methode wird verwendet, um bestimmte im Speicher vorhandene Daten zu löschen. Wir übergeben den Schlüssel an diese Methode und sie löscht die Schlüssel-Wert-Paare, die als Daten im Speicher vorhanden sind. 

localStorage.removeItem("name");

4. klar()

Diese Methode wird verwendet, um die im Speicher vorhandenen lokalen Speicherdaten zu löschen. 

localStorage.clear();

Tipp: Um die Größe von localStorage zu überprüfen, können Sie die folgende Syntax in der Browserkonsole ausführen

console.log(localStorage.length);

Lassen Sie uns diesen Wert an eine andere Seite senden. Wir werden zunächst alle ausgewählten geprüften Werte mit setItem() zum lokalen Speicher hinzufügen und dann auf der nächsten Seite die Werte mit der Methode getItem() herausholen.

Unsere JavaScript-Funktion, die den lokalen Speicher aufwertet, wird

sein 
<script type="text/javascript">
   function printChecked() {
      var items = document.getElementsByName("inputCheck");
      var arr=[];
      for (var i = 0; i < items.length; i++) {
         if (items[i].type == "checkbox" && items[i].checked == true){
            arr.push(items[i].value);
         }
      }
      localStorage.setItem("ddvalue", arr);
      return true;
   }
</script>

Hier erhalten Sie alle Checkbox-Elemente in der Items-Variablen und im arr-Array fügen wir alle Elemente hinzu, die als „true“ markiert wurden, was anzeigt, dass der Benutzer sie ausgewählt hat. und fügen Sie das Array zum lokalen Speicher hinzu.

JavaScript-Funktion zum Abrufen des Werts aus dem Speicher der zweiten Seite

<script>
   var arr=localStorage.getItem("ddvalue");
   var selectedItems = "";
   for (var i = 0; i < arr.length; i++) {
      selectedItems += arr[i] + ", ";
   }
   document.getElementById("result").innerHTML= selectedItems;
</script>

Das Array arr hier speichert die aus dem Speicher abgerufenen Werte zusammen mit den Schlüsselwerten. Wir nehmen eine leere String-Variable mit dem Namen „selected item“ und hängen dann alle Array-Elemente an. Abschließend drucken wir an seiner Stelle das ID-Ergebnis aus.

Seite1.html

<html>
<body>
   <form action="page2.html">
      <h1>Page1</h1> <hr/>
      <big>Select your favourite fruits: </big><br />
      <input type="checkbox" name="inputCheck" value="Apple" />Apple<br />
      <input type="checkbox" name="inputCheck" value="Mango" />Mango<br />
      <input type="checkbox" name="inputCheck" value="Banana" />Banana<br />
      <input type="checkbox" name="inputCheck" value="Orange" />Orange<br />
      <p><input type="submit" id="submitBtn" value="submit" onclick="printChecked()"/></p>
   </form>
   <script type="text/javascript">
      function printChecked() {
         var items = document.getElementsByName("inputCheck");
         var arr=[];
         for (var i = 0; i < items.length; i++) {
            if (items[i].type == "checkbox" && items[i].checked == true){
               arr.push(items[i].value);
            }
         }
         localStorage.setItem("ddvalue", arr);
         document.write("Submitted Successfully. <br> To see the result, please run the Page2.html")
         return true;
      }
   </script>
</body>
</html>

Seite2.html

<html>
<head>
   <title>Print checked button values on another page- JavaScript.</title>
</head>
<body>
   <h1>Page2</h1>
   <hr/>
   The Selected course is: <b><span id="result"></span></b>
   <script>
      var arr=localStorage.getItem("ddvalue");
      arr=arr.split(",");
      var selectedItems = "";
      for (var i = 0; i < arr.length; i++) {
         selectedItems += "<br>" + arr[i] ;
      }
      document.getElementById("result").innerHTML= selectedItems;
   </script>
</body>
</html>

Aus der Ausgabe können Sie erkennen, dass auf der ersten Seite page1.html alle Elemente angezeigt werden und wenn der Benutzer ein Element aus der ausgewählten Liste auswählt, werden alle ausgewählten Werte mit dem Schlüsselnamen value zum Speicher hinzugefügt. Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, wird er zur nächsten Seite weitergeleitet, d. h. page2.html. Auf Seite 2 ruft das Programm mithilfe des Schlüsselwerts den vom Benutzer ausgewählten Wert aus dem Speicher ab, durchläuft das Array und hängt den endgültigen Wert an und druckt ihn aus.

Das obige ist der detaillierte Inhalt vonAusgewähltes Kontrollkästchen auf einer anderen Seite mit JavaScript anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json html Cookie 字符串 存储类 循环 值传递
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Der Unterschied zwischen GET- und POST-Anfragen in JavaScriptNächster Artikel：Der Unterschied zwischen GET- und POST-Anfragen in JavaScript

In Verbindung stehende Artikel

Mehr sehen