JS implémente un panier simple avec des images et du code

Comme le montre la figure :

L'implémentation du bouton Sélectionner tout est :

<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>

La dernière balise span est utilisée pour stocker la zone qui affiche le montant total.

Le code pour implémenter les deux fonctions "sélectionner tout" est :

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 implémente l'acquisition du bouton d'événement de réponse.

La boucle for modifie l'attribut coché de chaque case à sélection multiple.

La méthode de calcul du montant total est la suivante :

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); 
}

Ajoutez les valeurs de toutes les cases à cocher sélectionnées.

Pour plus d'articles sur l'implémentation par js d'un panier d'achat simple avec des images et des codes, veuillez faire attention au site Web PHP chinois !

Articles connexes :

Principes de mise en œuvre du panier d'achat pour novices PHP

Méthode jQuery d'implémentation du panier d'achat basée sur json et cookie

Simulation js native Projet de panier d'achat Taobao combat réel

php pour implémenter simple ajout au panier Introduction détaillée du code graphique