function myAll(){ var all = document.getElementById('all'); var oneList = document.getElementsByName('one'); for(var i = 0; i < oneList.length; i++){ oneList[i].checked = all.checked; } } //下面全选上面同时跳全选 function myOne(){ var all = document.getElementById('all'); var oneList = document.getElementsByName('one'); for(var i = 0; i < oneList.length; i++){ if(oneList[i].checked == false){ all.checked = false; return; } } all.checked=true; }根据以上代码生成购物车选中商品计算总价代码
时间: 2024-02-10 14:06:10 浏览: 109
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
5星 · 资源好评率100%
假设每个商品的价格存在一个属性`data-price`中,可以通过以下代码实现选中商品计算总价的功能:
```javascript
// 获取所有商品复选框元素和全选复选框元素
var all = document.getElementById('all');
var oneList = document.getElementsByName('one');
// 添加全选和每个商品的点击事件监听器
all.addEventListener('click', function(){
myAll();
calculateTotalPrice();
});
for (var i = 0; i < oneList.length; i++) {
oneList[i].addEventListener('click', function(){
myOne();
calculateTotalPrice();
});
}
// 计算总价的函数
function calculateTotalPrice() {
var totalPrice = 0;
for (var i = 0; i < oneList.length; i++) {
var one = oneList[i];
if (one.checked) {
var price = parseFloat(one.getAttribute('data-price'));
totalPrice += price;
}
}
console.log('总价为:' + totalPrice);
}
// 全选函数
function myAll() {
for(var i = 0; i < oneList.length; i++){
oneList[i].checked = all.checked;
}
}
// 单选函数
function myOne() {
for(var i = 0; i < oneList.length; i++){
if (oneList[i].checked == false) {
all.checked = false;
return;
}
}
all.checked = true;
}
```
以上代码中,`calculateTotalPrice()`函数用于计算选中商品的总价,`myAll()`和`myOne()`函数用于处理全选和单选事件。在`myAll()`和`myOne()`中,分别设置商品复选框的选中状态和全选复选框的选中状态。在每个复选框的点击事件中,都调用了`calculateTotalPrice()`函数计算选中商品的总价,并将结果输出到控制台。
阅读全文