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
Inhaltsverzeichnis 1. Vorbereitung 1. Bereiten Si...
html,Adresse, Blockzitat, Körper, dd, div, dl,dt,...
Inhaltsverzeichnis Vorwort Entwicklungsumgebung N...
Inhaltsverzeichnis 1. Was ist eine Komponente? 2....
Vorwort Bei der tatsächlichen Entwicklung werden ...
Ergebnisse erzielenAnforderungen/Funktionalität: ...
Vue-Router-Übergänge sind eine schnelle und einfa...
Suchseite: search.wxml-Seite: <view class=&quo...
Lassen Sie mich kurz das Funktionsszenario erklär...
Wenn Sie einige 64-Bit-Anwendungen (wie 64-Bit-JD...
Ich bin heute auf mehrere Browserkompatibilitätsp...
Es gibt zwei Möglichkeiten, einen Primärschlüssel...
Nachdem Sie Docker auf dem Linux-Server installie...
Docker-Machine ist ein offiziell von Docker berei...
Dieser Artikel beschreibt, wie man eine MySQL Mas...