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:
|
<<: Zusammenfassung gängiger Docker-Befehle (empfohlen)
>>: MySQL-Export ganzer oder einzelner Tabellendaten
<br />Tabelle ist ein umständliches Tag in X...
Fügen Sie dem img-Bild-Tag ein Alt-Attribut hinzu?...
Schauen Sie sich zuerst die Lösung an #----------...
Wichtiger Hinweis: Bevor Sie diesen Artikel lesen...
Ich hatte dieses Problem in letzter Zeit beim Desi...
Windows Server 2019 ist das neueste Server-Betrie...
Umfeld: MAC_OS 10.12 Python 3.6 MySQL 5.7.25 Djan...
Heute ist mir plötzlich eingefallen, dass es cool ...
Inhaltsverzeichnis Was ist ein Skelettbildschirm?...
Update: Vor Kurzem wurde festgestellt, dass der S...
Inhaltsverzeichnis 1. DHCP-Dienst (Dynamic Host C...
1. Tabellen erstellen <br /> Erstellen Sie ...
Warum prettier verwenden? In großen Unternehmen k...
<br />Mit diesem Tag können Sie direkt einen...
Mysqldump wird für logische Backups in MySQL verw...