JS implémente un panier simple avec des images et du code-js tutoriel-php.cn

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

高洛峰

Libérer： 2017-03-15 16:21:59

original

1661 Les gens l'ont consulté

Comme le montre la figure :

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

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 !