JavaScript zur Implementierung eines einfachen Einkaufsformulars

JavaScript zur Implementierung eines einfachen Einkaufsformulars

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung eines einfachen Einkaufsformulars zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

HTML Quelltext:

<table border="" cellspacing="0" cellpadding="1">
   <tr style="Hintergrundfarbe: #0099cc;">
    <td><input Typ="Kontrollkästchen" Klasse="alle"/></td>
    <td style="text-align: center; width: 200px;">Produkte</td>
    <td style="Farbe: weiß; Breite: 70px; Höhe: 30px; Textausrichtung: Mitte;">Preis</td>
   </tr>
   <tr class="zuida">
    <td><input Typ="Kontrollkästchen" Klasse="lla"/></td>
    <td>Apfel</td>
    <td style="text-align: center;" Klasse="zongji">8000</td>
   </tr>
   <tr class="zuida">
    <td><input Typ="Kontrollkästchen" Klasse="lla"/></td>
    <td>Banane</td>
    <td style="text-align: center;" Klasse="zongji">5000</td>
   </tr>
   <tr class="zuida">
    <td><input Typ="Kontrollkästchen" Klasse="lla"/></td>
    <td>Birne</td>
    <td style="text-align: center;" Klasse="zongji">2000</td>
   </tr>
   <tr class="zuida">
    <td><input Typ="Kontrollkästchen" Klasse="lla"/></td>
    <td>Gemüse</td>
    <td style="text-align: center;" Klasse="zongji">2000</td>
   </tr>
   <tr>
    <td colspan="3">Der Gesamtpreis beträgt: <span class="zongjia">0</span> Yuan</td>
   </tr>
</Tabelle>

JQ-Code:

<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  <Skripttyp="text/javascript">
   $(Funktion(){
     $(".alle").ändern(Funktion(){
      var-Wert = $(this).prop("geprüft")
      $(".lla").prop("überprüft",Wert)
      zongjia ()
     })
     $(".lla").klick(function(){
      var chang1=$(".lla").Länge;
      var chang2=$(".lla:checked").Länge;
      wenn(ändern1===ändern2){
       $(".all").prop("aktiviert",true)
      }anders{
       $(".all").prop("aktiviert",falsch)
      }
      zongjia ()
     })
     $(".lla").ändern(Funktion(){
      zongjia ()
     })
     Funktion zongjia(){
      var xuan=$(".lla:checked").parents(".zuida");
      Variable Nummer = 0;
      xuan.each(Funktion(Index,ROM){
       var xuanzhi=$(rom).find(".zongji").text()*1;
       Zahl+=xuanzhi;
      })
      $(".zongjia").text(num);
     }
    })
</Skript>

Bild des fertigen Produkts:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Vuejs bringt Ihnen Schritt für Schritt bei, einen vollständigen Beispielcode für einen Einkaufswagen zu schreiben
  • Ideen und Code zur Implementierung von js-Einkaufswagen (finde ich persönlich gut)
  • Schreiben einer einfachen Warenkorbfunktion in JavaScript
  • Detaillierter Javascript-Code zur Implementierung der Warenkorbfunktion
  • js implementiert einen einfachen Einkaufswagen mit Bildern und Codes
  • Jsp+Servlet zur Realisierung der Warenkorbfunktion
  • Javascript manipuliert Cookies, um Warenkorbprogramm zu implementieren
  • Einfaches Front-End-JS+Ajax-Einkaufswagen-Framework (Anleitung für Anfänger)
  • Native JS-Simulation Taobao Einkaufswagen-Projektpraxis
  • js, um Einkaufswagen-Additions- und Subtraktionseffekte zu erzielen

<<:  Zusammenfassung gängiger Docker-Befehle (empfohlen)

>>:  MySQL-Export ganzer oder einzelner Tabellendaten

Artikel empfehlen

Zusammenfassung der Ubuntu-Sicherungsmethoden (vier Typen)

Methode 1: Um Respin zu verwenden, folgen Sie die...

Die Magie des tbody-Tags beschleunigt die Anzeige von Tabelleninhalten

Sie haben sicher schon einmal die Webseiten andere...

Vue3 implementiert CSS unendlichen nahtlosen Scrolleffekt

In diesem Artikelbeispiel wird der spezifische Co...

Einführung in die Verwendung gängiger Dockerfile-Befehle

Inhaltsverzeichnis 01 CMD 02 EINSTIEGSPUNKT 03 AR...

js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen

Heute werden wir einen einfachen Fall durchgehen ...

CSS-Code zum Erreichen eines Hintergrundverlaufs und automatischen Vollbilds

CSS-Probleme mit dem Hintergrundverlauf und dem a...

Detaillierte Erläuterung der Verwendung des Linux-Zeitbefehls

1. Befehlseinführung Mit „time“ werden die für di...

Beispiel für eine Routing-Berechtigungsverwaltungsmethode in Vue2/vue3

1. Es gibt im Allgemeinen zwei Methoden zur Steue...