javascript中DOM复选框选择用法实例

本文实例讲述了javascript中DOM复选框选择用法。分享给大家供大家参考。具体如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框全选全清和反选</title>
<script type="text/javascript">
//取得所有的复选框对象数组
function GetAllCheckBox() {
  var div = document.getElementById("Balls");
  var inputs = div.getElementsByTagName("input");
  //定义复选框数组,用来返回
  var checkboxs = new Array();
  var nIndex = 0;
  for (var i = 0; i < inputs.length; i++) {
 //通过type是否为checkbox来判断复选框
 if (inputs[i].type == "checkbox") {
   checkboxs[nIndex] = inputs[i];
   nIndex++;
 }
  }
  return checkboxs;
}
//全选
function selAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 checkboxs[i].checked = true;
  }
}
//全清
function clearAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 checkboxs[i].checked = false;
  }
}
//反选
function reverseAll() {
  var checkboxs = GetAllCheckBox();
  for (var i = 0; i < checkboxs.length; i++) {
 if (checkboxs[i].checked == true) {
   checkboxs[i].checked = false;
 }
 else {
   checkboxs[i].checked = true;
 }
  }
}
</script>
</head>
<body>
<div id="Balls">
<input type="checkbox" id="c1" /><label for="c1">足球</label>
<input type="checkbox" id="c2" /><label for="c2">台球</label>
<input type="checkbox" id="c3" /><label for="c3">乒乓球</label>
<br />
<input type="button" value="全选" onclick="selAll()" />
<input type="button" value="全清" onclick="clearAll()" />
<input type="button" value="反选" onclick="reverseAll()" />
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2015-05-12

JavaScript DOM元素尺寸和位置

一 获取元素的CSS大小 1.通过style内联获取元素的大小 复制代码 代码如下: var box = document.getElementById('box');    // 获得元素;      box.style.width;                             // 200px;      box.style.height;                            // 200px; // PS:style获取只能取到行内style属性的CSS样式中

高性能JavaScript DOM编程(1)

我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

详解JavaScript操作HTML DOM的基本方式

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的

详解JavaScript对W3C DOM模版的支持情况

本文档对象模型允许访问所有的文档内容和修改,由万维网联合会(W3C)规范.几乎所有的现代浏览器都支持这种模式. 在W3C DOM规范的大部分传统DOM的功能,而且还增加了新的重要的功能.除了支持forms[ ], images[ ]和文档对象的其它数组属性,它定义了方法,使脚本来访问和操纵的任何文档元素,而不只是专用元件状的表单和图像. 文档属性在W3C DOM: 此模型支持所有传统DOM提供的属性.此外,这里是文档属性,可以使用W3C DOM访问列表: 文档方法在W3C DOM: 此模型支持所

javascript基于DOM实现权限选择实例分析

本文实例讲述了javascript基于DOM实现权限选择的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>权限选择</title> &

JavaScript简单遍历DOM对象所有属性的实现方法

本文实例讲述了JavaScript遍历DOM对象所有属性的实现方法.分享给大家供大家参考,具体如下: DOM对象的HTML: 复制代码 代码如下: <button id="btnToggleState" onclick="toggleStateManagement()">Disable State Cookie</button> 1.遍历DOM对象所有具备的属性(全属性.不管在HTML tag中是否设置都会遍历) var obj=docume

JavaScript学习笔记之DOM基础 2.4

DOM的发展,与WEB标准化的大趋势相关甚密.只有基于正确的语义逻辑,DOM才能正确地发挥其功用.如今,正确的语义结构.表现与内容分离等要求,都已经成为网页设计中的基本要求.因此,在网页前端开发中,DOM的存在,无疑是为表现层.行为层甚至内容层面的连接提供了一个绝佳的API,成为热门的Ajax应用中不可或缺的组成部分. 一.平稳退化 1.概念 早期,在未使用JavaScript之前,网页中的内容可以正常显示出来,用户可以通过外设(如鼠标)操控浏览到相关内容,这种浏览体验对用户而言可能并不理想.

javascript实现dom动态创建省市纵向列表菜单的方法

本文实例讲述了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/xhtm

浅谈javascript中的DOM方法

1:获取对象的三种方法 1)document.getElementById(id);通过对象的属性id来获取; 2)element.getElementByTagName(tag);通过标签名来获取; 3)element.getElementByClassName(class);通过属性类名来获取; 2:属性的set和get方法. 1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute; 2)obj

JavaScript获取DOM元素的11种方法总结

在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

javascript将DOM节点添加到文档的方法实例分析

本文实例讲述了javascript将DOM节点添加到文档的方法.分享给大家供大家参考.具体如下: 这里对两种方法进行了比较:第一种:先创建所有节点,再添加到文档方式的运行时长:第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长,从测试来看,第二种方法优于第一种! 运行效果如下图所示: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

JavaScript文档碎片操作实例分析

本文实例分析了JavaScript文档碎片操作方法.分享给大家供大家参考,具体如下: 使用文档碎片在某些情况下可以提高页面效率. javascript操作dom是一个很耗性能的过程,在某些情况下,不得不进行dom循环操作,我们每次对dom的操作都会触发"重排",这严重影响到能耗,一般通常采取的做法是尽可能的减少dom操作来减少"重排". 面对循环操作dom的过程,我们选择使用文档碎片(creatDocumentFragment),将需要添加到dom中的内容一次性添加

PHP4和PHP5版本下解析XML文档的操作方法实例分析

本文实例讲述了PHP4和PHP5版本下解析XML文档的操作方法.分享给大家供大家参考,具体如下: 在PHP网站开发与建设过程中,时常会碰到需要对XML文档进行解析,PHP4版本自带了XML解析器(sax),PHP5版本增加了SimpleXML(基于dom)的XML扩展,对XML的解析更是非常方便,今天和大家分享下在不同环境下对XML文档进行解析的方法. XML文档 <?xml version="1.0" encoding="gbk"?> <Leap

javascript实现html页面之间参数传递的四种方法实例分析

本文实例讲述了javascript实现html页面之间参数传递的四种方法.分享给大家供大家参考,具体如下: 我们知道,在服务器端asp,jsp等程序可以接受html页面上的form传来的参数.那么,可不可以传递参数给html页面呢.可以. 原理:通过window.location.href中的分割符获得各个参数 方法一: /* *函数功能:从href获得参数 *sHref: http://www.cscenter.com.cn/arg.htm?arg1=d&arg2=re *sArgName:a

如何将HTML字符转换为DOM节点并动态添加到文档中详解

前言 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 字符串转换为HTML DOM节点的基本方法及性能测试 2 动态生成的DOM节点添加到文档中的方法及性能测试 本文的示例: 有如下代码段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

通过php添加xml文档内容的方法

本文实例讲述了通过php添加xml文档内容的方法.分享给大家供大家参考.具体分析如下: 这里讲述的添加xml文档内容,从上一篇<DOM基础及php读取xml内容操作的方法>继续,代码如下: 复制代码 代码如下: <?php //1.创建一个DOMDocument对象.该对象就表示 xml文件 $xmldoc = new DOMDocument(); //2.加载xml文件(指定要解析哪个xml文件,此时dom树节点就会加载到内存中) $xmldoc->load("clas

PHP基于DOM创建xml文档的方法示例

本文实例讲述了PHP基于DOM创建xml文档的方法.分享给大家供大家参考,具体如下: DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> <author>金庸</author> <content> <![CDATA[ 天龙八部是金庸写的一本武侠小说,非常好看! ]]> </content> <

仅img元素创建后不添加到文档中会执行onload事件的解决方法

示例 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>仅img元素创建后却不添加到文档中会执行onload事件</title> </HEAD> <BODY> <script> var img = document.createElement('img'); img.src = &qu

PHP使用DOM和simplexml读取xml文档的方法示例

本文实例讲述了PHP使用DOM和simplexml读取xml文档的方法.分享给大家供大家参考,具体如下: 实例  用DOM获取下列xml文档中所有金庸小说的书名,该xml文档所在位置为 ./books.xml: <?xml version="1.0" encoding="utf-8"?> <root> <book> <title>天龙八部</title> <author>金庸</autho

java中四种生成和解析XML文档的方法详解(介绍+优缺点比较+示例)

众所周知,现在解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 下面首先给出这四种方法的jar包下载地址 DOM:在现在的Java JDK里都自带了,在xml-apis.jar包里 SAX:http://sourceforge.net/projects/sax/ JDOM:http://jdom.org/downloads/index.html DOM4J:http://sourceforge.net/projects/dom4j/  一.介绍及优缺点分析