javascript 商品列表统计金额(checkbox)

最新推荐文章于 2022-11-24 14:31:15 发布
最新推荐文章于 2022-11-24 14:31:15 发布
阅读量1k 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limlimlim/article/details/8549197
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>商品列表统计金额</title>
    <style type="text/css">
            body,div,p
            {
                margin:0;
                padding:0;
                font-size:14px;
            }
            #sumMoney
            {
                font-size:26px;
                font-weight:bold;
                color:Red;
            }
    </style>
    <script type="text/javascript">
        //全选和全清
        function checkAll() {
            var chkItems = document.getElementsByName("item");
            for (var i = 0; i < chkItems.length; i++) {
                chkItems[i].checked = event.srcElement.checked;
            }
            calculateMoney();
        }
        //统计所有选中的产品金额
        function calculateMoney() {
            var sum = 0;
            var chkItems = document.getElementsByName("item");
            for (var i = 0; i < chkItems.length; i++) {
                if (chkItems[i].checked) {
                    sum += parseInt(chkItems[i].value);
                }
            }
            var sumMoneyObj = document.getElementById("sumMoney");
            sumMoneyObj.innerHTML = "总金额:" + sum;
        }

        //给每个产品复选框加上自动统计功能
        function iniEvent() {
            var chkItems = document.getElementsByName("item");
            for (var i = 0; i < chkItems.length; i++) {
                chkItems[i].onclick = calculateMoney;
            }           
        }
    </script>
</head>
<body οnlοad="iniEvent()">
    <div id="divMain">
        <p><input type="checkbox" name="全选" οnclick="checkAll()" />全选</p>
        <p><input type="checkbox" name="item" value="2999" />¥2999 Haier/海尔 KFR-35GW/03GJC12-DS</p>
        <p><input type="checkbox" name="item" value="2256" />¥2256 天猫年货 AUX/奥克斯 KFR-35GW/SFA+2</p>
        <p><input type="checkbox" name="item" value="2799" />¥2799 Gree/格力 KFR-26G(26556)FNDe-3</p>
        <p><input type="checkbox" name="item" value="2008" />¥2008 AUX/奥克斯 KFR-25GW/SFA+2</p>
        <p><input type="checkbox" name="item" value="2598" />¥2598 Hisense/海信 KFR-35GW/EF11S3</p>
        <p><input type="checkbox" name="item" value="1877" />¥1877 TCL KFRd-25GW/DE22</p>
        <p><input type="checkbox" name="item" value="2398" />¥2398 Kelon/科龙 KFR-35GW/EFVCS3</p>
        <p><input type="checkbox" name="item" value="1999" />¥1999 TCL KFRd-35GW/FC23</p>
        <p><input type="checkbox" name="全选" οnclick="checkAll()" />全选</p>
        <p><span id="sumMoney">总金额:</span></p>
    </div>
</body>
</html>

永远爱好写程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
计算机毕业设计Python+Django基于python高校资产管理系统(源码+系统+mysql数据库+Lw文档）
q_1039692211的博客
01-18 2468
运行环境 开发语言：Python python框架：django 软件版本：python3.7 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：PyCharm/vscode 前端框架:vue.js 项目介绍 当前高校的数量一直在不断地增加，相应的高校的设备已在不断地增加，传统的高校设备和资产管理都是通过手动的方式进行管理，这种管理方式非常的落后，而且管理效率低下，为了能够满足当前高校对资产和设备信息的信息化管理我们通过Python语言和Djiango框架开发了本高校资产管理系统。本选题
【javascript】根据复选框选中的商品，计算总额 | 根据选择的样式进行变换
11-29 4306
function getsum(){ //根据选择的复选框，计算资金总和 var items = document.getElementsByName("item"); var sum = 0 ; for(var x=0;x<items.length;x++){ if(items[x].checked) sum += parseInt(items[x].value);
javascript实现点击商品列表checkbox实时统计金额的方法
10-24
主要介绍了javascript实现点击商品列表checkbox实时统计金额的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
汽车维修管理系统（Web）
06-15
汽车维修管理系统是一个基于B/S架构的，主要使用JSP，JDBC，Servlet，js等技术，在MyEclipse下进行开发，使用的视SQL Server 2008数据库，部署在Tomcat服务器下。代码包里面包含了数据库文件。
java毕业设计——基于java+AngularJS+jsp的配件营销系统设计与实现（毕业论文+程序源码）——配件营销系统
m0_66238867的博客
07-06 670
大家好，今天给大家介绍基于java+AngularJS+jsp的配件营销系统设计与实现，文章末尾附有本毕业设计的论文和源码下载地址哦。文章目录： 项目难度：中等难度 适用场景：相关题目的毕业设计 配套论文字数：9133个字21页 包含内容：整套源码+完整毕业论文+答辩PPT+辅导视频+运行截图 资源文件目录简图如下： 提示：以下为毕业论文的简略介绍，项目源码及完整毕业论文下载地址见文末。1 引言 省略配件营销中心销售系统的开发是非常有必要的。开发本系统主要解决的问题就是对于配件的管理及配件的销售。这是两个核
双击单元行显示详细信息
weixin_30700099的博客
06-11 321
实现效果：当双击单元行时会显示详细信息，如下图 前台实现过程： 1.首先要设置一个div盒子，用来存放查询出来的详细信息 <div id="details" class="easyui-panel" title="明细面板(双击单号即可显示哦！)" style="padding:3px"> 单据标号为:<span id="orderid"></sp...
js自动计算金额单位
08-20 1486
//自动计算金额单位 var _Handle_Money = function(num) { // 首先先声明一个金额单位数组 var AmountUnitlist = ["元", "万元", "亿"]; // 将数字金额转为字符串 var strnum = num.toString(); // 声明一个变量用于接收金额单位 var AmountUnit = ''; // 循环遍历单位数组 for(var i =.
JS实现像sql一样分组统计
weixin_45086164的博客
11-24 578
JS实现像sql一样分组统计
JS计算勾选商品总额
第五个世界的博客
11-28 5778
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>标签属性练习.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> 商品列表<b
通过复选框计算总价
weixin_34153893的博客
07-12 920
<html> <!--用户每选中一个复选框，就表示用户选定与之关联的商品，脚本程序立即算出所有选定商品的总金额，并显示在总价格区域中。 如果用户取消先前选择的某件商品，脚本程序应立即从总金额中减去该商品的价格。--> <head> <title>Untitled Page</title> ...
javascript中checkbox使用方法实例演示
10-23
通过简单的实例演示了javascript中checkbox使用方法，感兴趣的小伙伴们可以参考一下
javascript使用avalon绑定实现checkbox全选
10-24
checkbox全选应该是一个比较实用的前端技巧吧，很多时候我们都需要点击一个checkbox，然后将所有的复选框自动全部选中，一些CMS系统的后台中，使用本JS效果后，会大大增强了操作体验，那么究竟是如何实现这一功能的...
javascript 多级checkbox选择效果
10-29
多级checkbox选择效果,具体的效果可以看下面的图，有需要的朋友可以参考下。
javascript 动态设置样式style
热门推荐
limlimlim的专栏
12-25 2万+
动态修改style 1.易错:修改元素的样式不是设置class属性，而是className属性. 2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript中    操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为    javascript中-是不能做属性，类名的。所以在CSS中背景色是background-clolor,
javascript createElement的两种方式
limlimlim的专栏
12-27 9123
http://www.w3.org/1999/xhtml">     CreateElement的两种创建方式             function CreateButton1() {             var btn = document.createElement("input");             btn.type = "button";
javascript document.getElementsByName方法 操作radio
limlimlim的专栏
12-19 8002
http://www.w3.org/1999/xhtml">                 //遍历所有Radio的Value            function onclickme() {             var radios = document.getElementsByName("gender");             /*
javascript (table选中的行以指定颜色高亮显示)
limlimlim的专栏
12-25 5722
http://www.w3.org/1999/xhtml">     table选中的行以指定颜色高亮显示             function IniEvent() {             var tbl = document.getElementById("tblMain");             var trs = tbl.getElementsByTagName
javascript clipboardData对象详解
limlimlim的专栏
12-19 5658
clipboardData对象     ,注意网页里剪贴板到现在只能设置Text类型，即只能复制文本 clearData("Text")清空粘贴板 getData("Text")读取粘贴板的值 setData("Text",val)设置粘贴板的值 当复制的时候body的oncopy事件被触发,直接return false就是禁止复制,注意是不能复制网页里的文本了 很多元素也有onco
javascript IE8/IE9上打开弹出窗口时,地址栏和状态栏仍显示的解决办法
limlimlim的专栏
01-25 5451
使用JavaScript在IE8/IE9上打开弹出窗口时,地址栏和状态栏仍显示的解决办法2个 经过调查,由于IE8/IE9的安全级别得到了提高. 弹出窗口在默认情况下是肯定会显示地址栏和状态栏的. 据调查,通过js也是没有办法控制这点的. 但是通过修改浏览器的设置是可以达到目的的. 1)将域名添加到IE的信任列表 2)修改高级属性     工具⇒Internet选项⇒安全⇒Inter
javascript中checkbox单选
最新发布
06-10
通常情况下，使用 checkbox 元素来实现单选功能并不是最佳选择，因为 checkbox 元素本身就是用来表示多选的。 但是，如果你非常需要用 checkbox 元素来实现单选功能，可以使用以下两种方法： 1. 通过设置同名的 checkbox 元素的 onchange 事件，当其中一个 checkbox 被选中时，将其它 checkbox 的选中状态取消。 ```html <label> <input type="checkbox" name="choice" value="option1" onchange="checkOnlyOne(this)"> Option 1 </label> <label> <input type="checkbox" name="choice" value="option2" onchange="checkOnlyOne(this)"> Option 2 </label> <label> <input type="checkbox" name="choice" value="option3" onchange="checkOnlyOne(this)"> Option 3 </label> <script> function checkOnlyOne(currentCheckbox) { const checkboxes = document.querySelectorAll('input[name="' + currentCheckbox.name + '"]'); for (const checkbox of checkboxes) { if (checkbox !== currentCheckbox) { checkbox.checked = false; } } } </script> ``` 以上代码创建了三个 checkbox 元素，它们的 name 属性值都为 `"choice"`，表示它们属于同一组。当其中一个 checkbox 被选中时，将其它 checkbox 的选中状态取消。具体实现是通过 onchange 事件调用 checkOnlyOne() 函数，该函数首先获取同名的所有 checkbox 元素，然后遍历它们，将除当前 checkbox 外的其它 checkbox 的选中状态设置为 false。 2. 通过设置同名的 radio 元素，使用 radio 元素来实现单选功能。 ```html <label> <input type="radio" name="choice" value="option1"> Option 1 </label> <label> <input type="radio" name="choice" value="option2"> Option 2 </label> <label> <input type="radio" name="choice" value="option3"> Option 3 </label> ``` 以上代码创建了三个 radio 元素，它们的 name 属性值都为 `"choice"`，表示它们属于同一组。radio 元素默认就是单选的，所以不需要任何 JavaScript 代码来实现。当其中一个 radio 元素被选中时，其它 radio 元素的选中状态会自动取消。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值