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

XHTML-Einführungstutorial: Anwendung von Tabellen-Tags

<br />Tabelle ist ein umständliches Tag in X...

Ist es notwendig, dem Img-Bild-Tag ein Alt-Attribut zuzuweisen?

Fügen Sie dem img-Bild-Tag ein Alt-Attribut hinzu?...

Windows Server 2019 installieren (grafisches Tutorial)

Windows Server 2019 ist das neueste Server-Betrie...

Django2.* + Mysql5.7-Entwicklungsumgebung Integrations-Tutorial-Diagramm

Umfeld: MAC_OS 10.12 Python 3.6 MySQL 5.7.25 Djan...

Der Aufruf der Suchmaschine auf der Seite erfolgt am Beispiel von Baidu

Heute ist mir plötzlich eingefallen, dass es cool ...

Beispiel für die Implementierung des Skelettbildschirms des WeChat-Applets

Inhaltsverzeichnis Was ist ein Skelettbildschirm?...

Eine sehr detaillierte Erklärung des Linux DHCP-Dienstes

Inhaltsverzeichnis 1. DHCP-Dienst (Dynamic Host C...

Detailliertes Tutorial zur Verwendung des Prettier Code-Plugins in vscode

Warum prettier verwenden? In großen Unternehmen k...

Tutorial zur HTML-Tabellenauszeichnung (15): Tabellentitel

<br />Mit diesem Tag können Sie direkt einen...

So verwenden Sie mysqldump für vollständige und zeitpunktbezogene Sicherungen

Mysqldump wird für logische Backups in MySQL verw...