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 ...
随机推荐
- 从 python 中 axis 参数直觉解释 到 CNN 中 BatchNorm 的工作方式(Keras代码示意)
1. python 中 axis 参数直觉解释 网络上的解释很多,有的还带图带箭头．但在高维下是画不出什么箭头的．这里阐述了 axis 参数最简洁的解释． 假设我们有矩阵a, 它的shape是(4, ...
- 什么样的简历受HR青睐？
简历是我们在求职过程中的名片,那么如何写出更容易受到HR青睐的简历呢? HR可能一天要看上百份的简历,他们都希望能够尽快筛选出合适的人,然后用更多的时间去跟候选人沟通.所以招聘人员一般看一份简历只会花 ...
- (译)openURL 在 iOS10中已弃用
翻译自:openURL Deprecated in iOS10 译者:Haley_Wong 苹果在iOS 2 推出了 openURL:方法 作为一种打开外部链接的方式.而与之相关的方法 canOpen ...
- 27 自定义View 和案例
有时安卓提供的View不满足我们的需求时可以创建一个类继承View或其子类重写方法 如 package com.qf.sxy.day28_customview.view; import android ...
- 凸函数与Jensen不等式
这个是在凸优化里面看的,在EM算法中看有用到,所以用latex写了篇回忆用的小短文,现在不会把latex产生的pdf怎么转变成放到这里的内容. 所以我选择直接贴图. 这个pdf可以在我的资源里找到. ...
- Java进阶(四十三)线程与进程的区别
Java进阶(四十三)线程与进程的区别 1.线程的基本概念 概念:线程是进程中执行运算的最小单位,是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点在运行中必 ...
- JAR、WAR、EAR的使用和区别
最近接触这几个词较多,停下来总结总结它们的区别和联系,更好的深刻理解 Jar.war.EAR.在文件结构上,三者并没有什么不同,它们都采用zip或jar档案文件压缩格式.但是它们的使用目的有所区别: ...
- JSP1.x 自定义标签
Tag接口 任何一个标签都对应着一个java类,该类必须实现Tag接口,JSP遇到一个标签后后,将通过一个tld文件查找该标签的实现类,并运行该类的相关方法 import javax.servlet. ...
- Github客户端以及Git shell的使用
昨天介绍了怎么使用Git Shell来commit我们的代码,但是这都是简单的操作,我们还没有使用到Github是怎么进行版本控制的呢.所以,今天就来介绍一下,怎么来做版本控制吧. 必备材料 首先要确 ...
- 解析JSON的三种方式
JSONObject JSONObject jsonObject = new JSONObject(strJson); JSONArray jsonArray = jsonObject.getJS ...