首先看一下需求：

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

<!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. Android studio安装和问题

    一.Android studio的安装 [提示]A.以下Android studio2.2.2版本.(也有新版本) B.以下是用Android studio自带的sdk ①双击安装文件进行安装 ②如果 ...

  2. 如何搭建samba服务？

    为了日后便于查询,本文所涉及到的所有命令集合如下: chkconfig iptables off #关闭防火墙命令 在Centos7中使用的是chkconfig firewalld off seten ...

  3. 利用Python进行数据分析——Ipython

    利用Python进行数据分析--Ipython 一.Ipython一些常用命令 1.TAB自动补全 2.变量+? 显示相关信息 3.函数名+??可以获取函数的代码 4.使用通配符* np.load? ...

  4. android注解入门 并来自己写一个框架

    介绍 这里我带大家来学习一下注解 并且用来写下一个模仿xUtils3 中View框架 此框架 可以省略activity或者fragment的 findViewById 或者设置点击事件的烦恼 我正参加 ...

  5. MySQL系列教程（四）

    文件打开数(open_files) 我们现在处理MySQL故障时,发现当Open_files大于open_files_limit值时,MySQL数据库就会发生卡住的现象,导致Nginx服务器打不开相应 ...

  6. Programming In Scala笔记-第十六章、Scala中的List

    本章主要分析Scala中List的用法,List上可进行的操作,以及需要注意的地方. 一.List字面量 首先看几个List的示例. val fruit = List("apples&quo ...

  7. Android 多窗口详解

    多窗口支持 Android N 添加了对同时显示多个应用窗口的支持. 在手持设备上,两个应用可以在"分屏"模式中左右并排或上下并排显示. 在电视设备上,应用可以使用"画中 ...

  8. popupwindow中EditText获取焦点后自动弹出软键盘

    关于popupwindow中EditText获取焦点后自动弹出软键盘的问题,玩过手机qq或空间的童鞋应该知道,再点击评论时会弹出一个编辑框,并且伴随软键盘一起弹出是不是很方便啊,下面我们就来讲一下实现 ...

  9. Dynamics CRM Plugin DLL恢复工具

    本篇接上篇继续介绍XrmToolBox中的某项功能,该工具的下载见上篇博文. 打开XrmToolBox,找到Assembly Recovery Tool,点击进去 如何连接上你的组织继续不表,列表中显 ...

  10. 学习TensorFlow，打印输出tensor的值

    在学习TensorFlow的过程中,我们需要知道某个tensor的值是什么,这个很重要,尤其是在debug的时候.也许你会说,这个很容易啊,直接print就可以了.其实不然,print只能打印输出sh ...