Heim >Web-Frontend >js-Tutorial >JS implementiert einen einfachen Warenkorb mit Bildern und Code

JS implementiert einen einfachen Warenkorb mit Bildern und Code

高洛峰
高洛峰Original
2017-03-15 16:21:591668Durchsuche

Wie in der Abbildung gezeigt:

JS implementiert einen einfachen Warenkorb mit Bildern und Code

Die Implementierung der Schaltfläche „Alles auswählen“ lautet:

<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> 
<input type="button" value="获取总金额" onclick="getSum()" /> 
<span id="sum"></span>

Das letzte Span-Tag wird zum Speichern verwendet der Bereich, in dem der Gesamtbetrag angezeigt wird.

Der Code zum Implementieren der beiden „Alle auswählen“-Funktionen lautet:

function checkAll() 
{ 
//var allNode = document.getElementsByName("all")[0]; 
//获取被点击的元素 
var allNode = event.srcElement; 
var item = document.getElementsByName("item"); 
for(var x=0;x<item.length;x++) 
{ 
item[x].checked = allNode.checked; 
} 
}

event.srcElement implementiert die Erfassung der Antwortereignisschaltfläche.

Die for-Schleife ändert das aktivierte Attribut jedes Mehrfachauswahlfelds.

Die Methode zur Berechnung des Gesamtbetrags ist:

function getSum() 
{ 
var item = document.getElementsByName("item"); 
var sum = 0; 
for(var x=0;x<item.length;x++) 
{ 
if(item[x].checked) 
{ 
sum+=parseInt(item[x].value); 
} 
} 
var spanNode = document.getElementById("sum"); 
spanNode.innerHTML = (sum+"元").fontsize(7); 
}

Addieren Sie die Werte aller ausgewählten Kontrollkästchen.

Weitere verwandte Artikel über die Implementierung eines einfachen Warenkorbs mit Bildern und Codes durch js finden Sie auf der chinesischen PHP-Website!

Verwandte Artikel:

Grundsätze der Implementierung eines Einkaufswagens für Anfänger in PHP

jQuery-Methode zur Implementierung eines Einkaufswagens basierend auf JSON und Cookie

Native js Simulation Taobao Warenkorb Projekt tatsächlicher Kampf

php zu implementieren einfaches Hinzufügen zum Warenkorb Detaillierte Einführung des Grafikcodes

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn