zoukankan      html  css  js  c++  java
  • javascript之DOM编程根据属性找标签练习

    首先看一下需求:


    当点击全选时,选中所有的,当再点击时,全部取消。且选中某些项,点击总金额,会显示处总的金钱数。


    <!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>
    <script type="text/javascript"> 
     
    	function checkAll(allNode){//当点击全选的时候触发这里。
    		//找到所有的的选项
    		var items = document.getElementsByName("item");
    		//找到全选按钮的对象
    		//var allNode = document.getElementsByName("all")[0];
    		for(var i = 0 ; i<items.length ; i++){
    			items[i].checked = 	allNode.checked;//checked包括被点击和被取消点击两项。
    		}
    	}
    	
    	
    	function getSum(){
    		var items = document.getElementsByName("item");//返回的是一个数组
    		var sum = 0;
    		for(var i = 0 ; i<items.length ; i++){
    			if(items[i].checked){//该项被点击了
    				sum += parseInt(items[i].value);//把点击选中的这一项的value值转为金额且相加
    			}	
    		}	
    		var spanNode = document.getElementById("sumid");
    		spanNode.innerHTML = ("   ¥"+sum).fontcolor("green");//输入选中的总金额
    	}
    	
     
     
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
     
    <body>
    	<div>商品列表</div>
            <input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
            <input type="checkbox" name="item" value="1800"  />笔记本电脑1800元<br />
            <input type="checkbox" name="item" value="300"  />笔记本电脑300元<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(this)"  /> 全选<br />//这里的this代表的就是input李米娜的name=all的checkbox(全选)
            <input type="button" value="总金额:" onclick="getSum()" /><span id="sumid"></span>
    </body>
    </html>
    


  • 相关阅读:
    Linux服务器centos7系统下搭建Jenkins
    在Linux下执行Jmeter脚本
    Jmeter进阶篇之监控服务器cpu,内存
    Jmeter进阶篇之保存测试结果
    Jmeter进阶篇之逻辑控制器
    Jmeter在非GUI(命令行)模式下生成测试报告
    电商平台满减活动需求分析
    如何在服务器上搭建svn
    电商平台抽奖活动需求分析
    28岁转行软件测试晚不晚
  • 原文地址:https://www.cnblogs.com/wanghang/p/6299766.html
Copyright © 2011-2022 走看看