Dom的全选和反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>example01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GBK">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div>
<input type="checkbox" name="qx" id="qx"/>全选/全不选
<input type="checkbox" name="qbx" id="fx"/>反选
<div id="spr">
你喜欢的小品和歌曲是谁?<br/>
<hr color="red"/>
<input type="checkbox" name="fav" value="荆轲刺秦">荆轲刺秦
<input type="checkbox" name="fav" value="面试">面试
<input type="checkbox" name="fav" value="穿越">穿越
<input type="checkbox" name="fav" value="因为爱情">因为爱情
</div>
<br/>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var qxNode = get("qx");
var fxNode = get("fx");
var inputNodes = get("spr").getElementsByTagName("input");
//全选的功能
qxNode.onclick = function(){
if (this.checked) {
for (var i = 0; i < inputNodes.length; i++) {
inputNodes[i].checked = "checked";
}
}
else {
for (var i = 0; i < inputNodes.length; i++) {
inputNodes[i].checked = null;
}
}
}
//反选的功能
fxNode.onclick = function(){
for (var i = 0; i < inputNodes.length; i++) {
if (inputNodes[i].checked) {
inputNodes[i].checked = null;
}
else {
inputNodes[i].checked = "checked";
}
}
}
}
function get(id){
return document.getElementById(id);
}
</script>
分享到:
相关推荐
主要介绍了纯javascript实现选择框的全选与反选 ,需要的朋友可以参考下
全选反选复选框/全选按钮和按钮之间关系的实现
可实现全选框全选反选取消等,选了可删除。需引用jqueryDOM结构浅显易改。
排他思想,换皮肤,隔行变色,全选反选,自定义属性操作,tab栏切换,附带代码
javaScript入门案例之复选框全选,全不选,反选
实现将输入的信息添加到表格、删除表格内容的功能,适合前端初学者巩固DOM相关知识。涉及全选、反选,几种表单标签的使用。
这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块--> <...
主要介绍了javascript中DOM复选框选择用法,实例分析了javascript操作复选框实现全选与反选的相关技巧,需要的朋友可以参考下
2.全选全不选的练习:四个功能按钮,全选全不选按钮(点一下全选,再点一下全不选),全选按钮,全不选按钮,反选按钮 3.创建自定义表格(输入自定义行数和列数点击按钮即可生成表格) 4.时钟(显示当前动态时间) 5....
示例之全选和反选以及取消 javascript必须加分号 示例之后台管理左侧菜单 今日内容梳理 本周作业 第16周 上节作业问题答疑 今日内容计划 CSS内容补充以及后台管理页面布局 后台管理页面布局 JavaScript内容回顾 ...
1.动态创建表格 2.兼容IE和FireFox 3.具有间隔色 4.具有鼠标进过高亮显示功能 5.具有编辑和删除功能,每行附带有编辑和删除按钮 6.具有全选,全清和反选功能
webProject 这个项目是我在学校学习的时候写的一些小demo,很多还有更好的...2、实现复选框全选、全不选和反选功能 3、CSS3实现钟表可走动 4、DOM实现拖拽购物车结账功能 5、实现抽屉式效果图片展示 6、鼠标滑过内容动
实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与...
07 物理层和数据链路层 08 网络层和arp协议 09 传输层和应用层 第2章 01 上节课复习 02 arp协议复习 03 字符编码 第3章 01 网络基础和dos命令 02 为何学习linux 03 课程内容介绍 04 操作系统内核与系统调用 05 ...
第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用userData保存checkbox标记 21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用...
第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用userData保存checkbox标记 21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用...
├─(13) 03 python s3 day42 JS的history对象和location对象.avi ├─(14) 04 python s3 day42 JS的DOM节点.avi ├─(15) 05 python s3 day42 JS的DOM节点.avi ├─(16) day42.rar (7)\\python全栈day41-50\\python...