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>
javascript之DOM编程根据属性找标签练习的更多相关文章
- JavaScript的DOM编程--12--innerHTML属性
innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> < ...
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
- javascript之DOM编程通过html元素的标签属性找节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
- 高性能Javascript(2) DOM编程
第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
- javascript之DOM编程增加附件
在开始这个案例之前,需要学习一下有关于根据子关系节点获取标签的几个方法.罗列如下 /*通过关系(父子关系.兄弟关系)找标签.parentNode 获取当前元素的父节点.childNodes 获取当前元 ...
- JavaScript的DOM编程--07--节点的属性
节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整 ...
- JavaScript的DOM编程--03--读写属性节点
读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue ...
- JavaScript的DOM编程--01--js代码的写入位置
DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...
随机推荐
- samba服务器配置过程
SAMBA服务器配置 yum install samba samba-client samba-swat 改变文件权限及用户 vi /etc/samba/smb.conf d+G全删注释 复制下面代码 ...
- 《Python黑帽子》_1设置Python环境安装wingIDE
1首先你得有个Kali 检测python版本 安装pip 2安装wingIDE 网站 http://www.wingware.com 获取WingIDE 3解压wingide并且解决依赖关系 下载后在 ...
- OpenCV设置摄像头分辨率及全屏显示
OpenCV3.0下 设置摄像头分辨率为1920*1440,并全屏显示图像窗口. int _tmain(int argc, _TCHAR* argv[]) { Mat frame; VideoCapt ...
- sa账号无法登陆sqlserver2008
今天遇到sa无法登陆sqlserver2008的问题,原来是sa账户未启用,混合验证模式没打开,太低端了. 具体解决过程将从百度文库里查到的文章张贴如下: 出现问题 : 标题: 连接到服务器 ---- ...
- 进程间通信——XSI IPC之消息队列
进程间通信XSI IPC有3种:消息队列.共享内存.信号量.它们之间有很多相似之处,但也有各自的特殊的地方.消息队列作为其中比较简单的一种,它会有些什么东西呢,来一起探讨探讨.. 消息队列结构 消息队 ...
- Python3 SMTP发送邮件
SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. python的smtplib提供了一 ...
- JAVA中的常量定义在class中还是interface中比较合理？
本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 java中使用的常量可以集中定义在一个文件中. 有两种解决方案: 1.在Constants.java中 ...
- EJB_开发单表映射的实体bean
开发单表映射的实体bean 实体bean 它属于java持久化规范(JPA)里的技术,实体bean通过元数据在Javabean和数据库表之间建立起映射关系,然后Java程序员就可以随心所欲的使用面向对 ...
- 有两个序列A和B,A=(a1,a2,...,ak),B=(b1,b2,...,bk)，A和B都按升序排列。对于1<=i,j<=k，求k个最小的（ai+bj）。要求算法尽量高效。
有两个序列A和B,A=(a1,a2,...,ak),B=(b1,b2,...,bk),A和B都按升序排列.对于1<=i,j<=k,求k个最小的(ai+bj).要求算法尽量高效. int * ...
- Java学习之参数传递详解
Java中的参数传递问题: 基本类型:形式参数的改变对实际参数没有影响.在参数传递过程中,形参和实参占用了两个完全不同的内存空间. 引用类型:形式参数的改变直接影响实际参数.在参数传递的过程中,形参和 ...