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程序设计有所帮助。
相关推荐
-
JavaScript学习笔记之DOM基础 2.4
DOM的发展,与WEB标准化的大趋势相关甚密.只有基于正确的语义逻辑,DOM才能正确地发挥其功用.如今,正确的语义结构.表现与内容分离等要求,都已经成为网页设计中的基本要求.因此,在网页前端开发中,DOM的存在,无疑是为表现层.行为层甚至内容层面的连接提供了一个绝佳的API,成为热门的Ajax应用中不可或缺的组成部分. 一.平稳退化 1.概念 早期,在未使用JavaScript之前,网页中的内容可以正常显示出来,用户可以通过外设(如鼠标)操控浏览到相关内容,这种浏览体验对用户而言可能并不理想.
-
详解JavaScript对W3C DOM模版的支持情况
本文档对象模型允许访问所有的文档内容和修改,由万维网联合会(W3C)规范.几乎所有的现代浏览器都支持这种模式. 在W3C DOM规范的大部分传统DOM的功能,而且还增加了新的重要的功能.除了支持forms[ ], images[ ]和文档对象的其它数组属性,它定义了方法,使脚本来访问和操纵的任何文档元素,而不只是专用元件状的表单和图像. 文档属性在W3C DOM: 此模型支持所有传统DOM提供的属性.此外,这里是文档属性,可以使用W3C DOM访问列表: 文档方法在W3C DOM: 此模型支持所
-
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元素的11种方法总结
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i
-
JavaScript简单遍历DOM对象所有属性的实现方法
本文实例讲述了JavaScript遍历DOM对象所有属性的实现方法.分享给大家供大家参考,具体如下: DOM对象的HTML: 复制代码 代码如下: <button id="btnToggleState" onclick="toggleStateManagement()">Disable State Cookie</button> 1.遍历DOM对象所有具备的属性(全属性.不管在HTML tag中是否设置都会遍历) var obj=docume
-
详解JavaScript操作HTML DOM的基本方式
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的
-
javascript将DOM节点添加到文档的方法实例分析
本文实例讲述了javascript将DOM节点添加到文档的方法.分享给大家供大家参考.具体如下: 这里对两种方法进行了比较:第一种:先创建所有节点,再添加到文档方式的运行时长:第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长,从测试来看,第二种方法优于第一种! 运行效果如下图所示: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq
-
浅谈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元素尺寸和位置
一 获取元素的CSS大小 1.通过style内联获取元素的大小 复制代码 代码如下: var box = document.getElementById('box'); // 获得元素; box.style.width; // 200px; box.style.height; // 200px; // PS:style获取只能取到行内style属性的CSS样式中
-
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编程(1)
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是
随机推荐
- 深入理解Angular中的依赖注入
- 微信小程序(应用号)组件详细介绍
- 浅谈Lua的面向对象特性
- 解决Office2003找不到SKU011.CAB问题方法
- Android实战教程第一篇之最简单的计算器
- [推荐]ASP编程通用函数收藏大全第1/2页
- C语言数据结构 link 链表反转的实现
- MySQL的子查询中FROM和EXISTS子句的使用教程
- SQL Server误区30日谈 第23天 有关锁升级的误区
- php利用gd库为图片添加水印
- javascript匿名函数实例分析
- Shell编程之Shell变量学习总结
- 利用shell编程实现DOS风格的Linux命令行
- SQL Server 跨库同步数据
- jquery实现带缩略图的全屏图片画廊效果实例
- Linux环境下使用XFS文件系统
- java实现将数字转换成人民币大写
- asp.net上传图片到服务器方法详解
- 防火墙是关键控制还是全网服务
- Python for循环与range函数的使用详解
其他
- 解决vue data变量相互赋值后被实时同步的问题
- ios 截取两个字符串之间
- vue集成表单生成器
- unitywasd移动
- 微信小程序 下拉刷新到底弹框
- maven pull 有冲突可以强制更新
- iview reseFields 没有重置表单验证
- MySQL 利用frm文件和ibd文件恢复表数据
- aop不生效怎么定位
- python 如何计算空间坐标向量的夹角
- matlab模拟退火算法解决作业车间调度问题
- 你不知道的chrome调试技巧
- eclipse怎么写hello world
- vue 如何在前台七牛云拼接水印图片
- element ui加锁屏
- uniapp开发微信小程序连接mqtt
- el-transfer 加载大量数据卡顿
- @Validated 验证 list
- js如何实现翻书背面输入内容的方法
- java8 filter 多字段