JavaScript 购物车中的全选和单选及总金额计算的简易代码 |
您所在的位置：网站首页 › js弹出警告框代码怎么办 › JavaScript 购物车中的全选和单选及总金额计算的简易代码 |
|
全选和单选
案例分析 全选和取消全选做法：让下面所有的复选框的checked属性(选中状态)跟随全选按钮即可当单选全部勾选的时候，全选的选框自动勾选，当失去个别单选选框的时候，全选选框失去勾选最后计算金额的时候，遍历单选框的checked的属性，若为true，则加上价格注意：修改checked属性时，等号的右边不需要使用引号，否则效果可能会无法显现 在全选和取消全选的代码中，使用的是this.checked，而不使用flag来标记，这样子代码更精简，如果使用flag，那么可能会使用两个for循环 DOCTYPE html> 全选和单选 商品 价格 商品1 1000 商品2 20000 商品3 100 确定 最后总共消费0元 var chose_all = document.getElementById('choseAll'); var inputList = document.getElementsByName('goodList'); var price = document.querySelectorAll('.price'); var submit = document.querySelector('button'); var result = document.querySelector('a'); //全选或者取消全选 chose_all.onclick = function(){ for (let i = 0; i inputList[i].onclick = function(){ for (let i = 0; i flag = true; }else{ flag = false; break; } } chose_all.checked = flag; } } //对最后金额的计算 submit.onclick = function(){ let sum = 0; for (let i = 0; i sum += parseInt(price[i].innerText); } } result.innerText = '最后总共消费' + sum + '元'; }DOM基础详细及更多案例 https://blog.csdn.net/qq_56303170/article/details/119683887 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |