首先看一下需求：

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

<!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编程根据属性找标签练习的更多相关文章

  1. JavaScript的DOM编程--12--innerHTML属性

    innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> < ...

  2. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  3. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  5. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  6. javascript之DOM编程增加附件

    在开始这个案例之前,需要学习一下有关于根据子关系节点获取标签的几个方法.罗列如下 /*通过关系(父子关系.兄弟关系)找标签.parentNode 获取当前元素的父节点.childNodes 获取当前元 ...

  7. JavaScript的DOM编程--07--节点的属性

    节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整 ...

  8. JavaScript的DOM编程--03--读写属性节点

    读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue ...

  9. JavaScript的DOM编程--01--js代码的写入位置

    DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...

随机推荐

  1. Qt与FFmpeg联合开发指南（二）——解码（2）：封装和界面设计

    与解码相关的主要代码在上一篇博客中已经做了介绍,本篇我们会先讨论一下如何控制解码速度再提供一个我个人的封装思路.最后回归到界面设计环节重点看一下如何保证播放器界面在缩放和拖动的过程中保证视频画面的宽高 ...

  2. 拾遗与填坑《深度探索C++对象模型》3.2节

    <深度探索C++对象模型>是一本好书,该书作者也是<C++ Primer>的作者,一位绝对的C++大师.诚然该书中也有多多少少的错误一直为人所诟病,但这仍然不妨碍称其为一本好书 ...

  3. Python 妙用heapq

    小顶堆求TopK大 大顶堆求BtmK小 题外话 Python有一个内置的模块,heapq标准的封装了最小堆的算法实现.下面看两个不错的应用. 小顶堆(求TopK大) 话说需求是这样的: 定长的序列,求 ...

  4. win 8.1 64位彻底删除王码98

    安全模式 C:\Windows\SysWOW64\ 删除:winwb98.IME和winwb98.MB 注册表: 找到王码五笔相关的项.一般在最下面的以字母E开头的文件夹.全部删除. HKEY_LOC ...

  5. Win7下安装linux虚拟机

    关于如何在Win7下搭建linux学习环境,特在此分享下. 一.工具 1.VMware-workstation-full-9.0.0-812388.exe       下载地址:http://pan. ...

  6. 深入浅出如何解析xml文件---上篇

    xml小伙伴们并不陌生,xml是可扩展标记语言,标准通用标记语言语言的子集,是一种用来标记电子文件使其具有结构性的标记语言.我们知道xml可以用dom与sax等方法进行解析,但是xml为什么要解析呢? ...

  7. activiti bpmnModel使用

    bpmnModel对象,是activiti动态部署钟很重要的一个对象,如果bpmnModel对象不能深入的理解,那可能如果自己需要开发一套流程设计器,就显得力不从心,之前我们公司自己开发了一套acti ...

  8. React Native之ListView实现九宫格效果

    概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展 ...

  9. CentOS升级Svn到最新版

    CentOS升级Svn到最新版(金庆的专栏)CentOS/RHEL yum 安装的 subversion 是 1.6.11 版本,连VisulaSVN服务器时会有"Key usage vio ...

  10. 与markdown的第一次接触

    什么是markdown markdown是一种比html轻量级的标记语言. markdown的介绍与学习请参考:markdown认识与入门 CSDN Markdown博客视频教程 知乎: 怎样引导新手 ...