- 浏览: 656584 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (173)
- ajax (4)
- ant (4)
- css (14)
- eclipse (1)
- exe4j (0)
- hibernate (7)
- html (29)
- http (2)
- install4j (0)
- java (35)
- javascript (31)
- jdbc (1)
- jquery (2)
- jsp (15)
- linux命令 (8)
- ooad (2)
- properties (3)
- servlet (1)
- spring (3)
- struts (6)
- swing (4)
- thread (2)
- version_control (1)
- webservice (4)
- xml (4)
- 数据库 (19)
- 正则表达式 (5)
- 其他 (16)
- 面试题 (1)
- 框架 (9)
- maven (1)
- util (29)
- 设计模式 (1)
最新评论
-
herodie4444:
看起来好像不难。
Java Struts2创建Excel文件并实现文件下载 -
心轨翼:
Java遍历Set集合方法 -
魔鬼的献祭:
...
java的web开发分页工具类 -
Nmxszxsl:
能发一个没有被墙的代码到我的邮箱吗?万分感谢。54365156 ...
Google翻译post提交无长度限制的在线翻译例子 -
782763595:
...
jar包混淆器介绍
这是个网上找的网页复选框js全选组件例子。
js代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>checkbox的js全选功能</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link href="default.css" type="text/css" rel="stylesheet" /> <script language="JavaScript" src="selectall.js"></script> <script> function sel(obj){ _tlsCheckboxSelAll(document.frmUser,obj); } </script> </head> <body bgcolor="#FFFFFF" topmargin="15px" leftmargin="5px" rightmargin="5px"> <center><b>checkbox的js全选功能</b></center> <form name="frmUser" id="frmUser" method="post"> <table class="tabelBoder" width="100%" align="center" cellspacing="0" cellpadding="3" border="0"> <tr height="30" class="RH1"> <td width="4%" align="left"> 全选<input type="checkbox" name="id_all" id="id_all" value="46" onclick="sel(this)"></td> <td width="17%" align="left">姓名</td> <td width="23%" align="left">地址</td> </tr> <tr height="30" class="N1"> <td width="4%" align="left"> <input type="checkbox" name="id" value="46" onclick="sel(this)"></td> <td width="17%" align="left">张三</td> <td width="23%" align="left">北京</td> </tr> <tr height="30" class="N1"> <td width="4%" align="left"> <input type="checkbox" name="id" value="46" onclick="sel(this)"></td> <td width="17%" align="left">李四</td> <td width="23%" align="left">上海</td> </tr> <tr height="30" class="N1"> <td width="4%" align="left"> <input type="checkbox" name="id" value="46" onclick="sel(this)"></td> <td width="17%" align="left">王五</td> <td width="23%" align="left">天津</td> </tr> </table> </form> <ui> <li>支持ie和firefox</li> <li>选中全选 checkbox,则所有子checkbox自动选中</li> <li>去掉选中全选checkbox,则所有 子checkbox自动全部取消选中</li> <li>如果选中全部子checkbox,则全选 checkbox自动选中</li> <li>全选后,如果去掉选中任何子checkbox,则全选 checkbox自动取消选中</li> </ul> </body></html>
js代码:
/** * checkbox的点击方法 * 要求: * 1.全选/全不选的checkbox的name属性为 单个checkbox的name属性名+_all , 注意:最后必须为_all. * 例如:单个checkbox的name=or_id,则全选checkbox的name=or_id_all * 2.全选/全不选的checkbox必须定义id属性,并且id属性值与name属性值相同 * 3.所有单个的checkbox在同一个form中. * 4.全选/全不选的checkbox可以在form中也可以在form外面. * 5.整个页面不允许再有和全选/全不选checkbox同name和同id的组件. * */ function _tlsCheckboxSelAll(formObj,checkboxClicked){ var checkName = checkboxClicked.name;//取得点击的checkbox的name属性 var index = checkName.indexOf("_all");//判断是否有_all字符串 var isAll = false; if(index!=-1){//如果有_all if(index+"_all".length==checkName.length){//满足说明_all是在最后面,表示这是个全选/全不选的checkbox. isAll = true; } } var thisChecked = checkboxClicked.checked;//当前checkbox的状态 true=选中 false=不选中 if(isAll){//点了全选/全不选的checkbox var childCheckName = checkName.substring(0,index); eval("var allChildCheckboxs = formObj."+childCheckName); var childCheckboxCount = allChildCheckboxs.length; if(childCheckboxCount==null){//只有1个单个的checkbox allChildCheckboxs.checked = thisChecked; }else{//有2个或2个以上的单个checkbox for(var i=0;i<childCheckboxCount;i++){ allChildCheckboxs[i].checked = thisChecked; } } }else{//点了单个的checkbox var parentCheckboxName = checkName+"_all"; if(thisChecked==false){ document.getElementById(parentCheckboxName).checked=false; }else{//判断点了当前checkbox后是否全部的单个checkbox都处于true状态 eval("var allChildCheckboxs = formObj."+checkName); var childCheckboxCount = allChildCheckboxs.length; var isAllChecked = true; if(childCheckboxCount==null){//只有1个单个的checkbox if(allChildCheckboxs.checked==false){ isAllChecked = false; } }else{//有2个或2个以上的单个checkbox for(var i=0;i<childCheckboxCount;i++){ if(allChildCheckboxs[i].checked==false){ isAllChecked = false; break; } } } if(isAllChecked){//全部单个checkbox都处于true状态 document.getElementById(parentCheckboxName).checked=true; } } } }
发表评论
-
转 js中数据类型判断(转)
2012-11-05 11:07 1106转载自: http://www.cnblogs.com/yjh ... -
包含日期和时间的选择器(转)
2012-09-27 16:11 1028转载自: http://www.cnblogs.com/swe ... -
jsp通用分页实现脚本
2012-09-26 17:12 1665工具脚本使用时只需替换url的问号前半部分即可。 此页面需要j ... -
Java过滤html标签
2012-09-21 09:54 1751方法一: String oldStr="< ... -
Web项目设置页面不缓存
2012-08-04 19:55 2801htm网页 <meta http-equiv=&qu ... -
JS动态创建表格(转)
2012-01-06 18:40 1140目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号 ... -
ajax请求带中文url的参数转码解码
2011-12-13 10:56 3692js提交ajax请求,默认编码方式是ISO-8859-1,此编 ... -
CSS模块化设计——从空格谈起
2011-12-06 12:00 962引子: 今天在蓝点看 ... -
html框架页面文档声明
2011-12-06 10:55 2128通俗地讲,文档类型声明(Document Type Decl ... -
本地、远程图片上传预览
2011-11-24 11:00 1849本地、远程图片上传预览,带文件类型检查等功能,更多功能等待仔细 ... -
图片上传预览
2011-11-23 18:31 1363支持IE和FireFox,动态添加图片。 <!DOC ... -
修改 input file 的按钮值
2011-11-23 14:32 3840在网页中修改头像功能时需要把文件框给隐藏掉,网上找到如下方法解 ... -
Struts2中表单与Action传递数据三种方式(转)
2011-11-18 09:51 17571.Action中的属性与表单中的属性一致就可以 JSP ... -
HTML4和HTML5之间的10个主要不同
2011-11-17 13:04 809cnbeta.com上看到的文章, ... -
浏览器对js支持的差异
2011-11-16 17:31 922document.all firefox不支持,IE支持 -
键盘与ASCII对应值
2011-11-16 11:35 1196还未进行仔细编辑,待有空编辑成表格展示。 ASCII 表 及 ... -
表格测试
2011-11-16 11:27 843abccde -
网页iframe标签使用
2011-11-04 10:50 1332iframe使用很简单,使用src属性指向另一个你需要包含的另 ... -
js去除前后空格方法
2011-10-26 14:34 1136js去除前后空格方法 //去除前后空格方法 String ... -
js获取下拉列表选中项的值和文本(select)以及获取单选按钮(radio)组的值和修改选中项[转]
2011-10-25 15:59 1200一、获取下拉列表选中 ...
相关推荐
2.1 文本框/编辑框/隐藏域组件 96 实例055 获取文本框/编辑框/隐藏域的值 96 实例056 自动计算金额 97 实例057 设置文本框的只读属性 98 实例058 限制多行文本域输入的字符个数 100 实例059 自动选择文本框/编辑框中...
要实现全选单选,子类被逐个全选父类也要标记选中。 第一反应就是树形结构,和递归调用。曾经在做WPF时记得有现成的组件,也学着写过对应的后台。这次我要自己写一个前端的组件了。 这只是我自己花了点时间写的...
代码如下: function OnTreeNodeChecked() { var ele = event.srcElement; if (ele.type == ‘checkbox’) { var childrenDivID = ele.id.replace(‘CheckBox’, ‘Nodes’); var div = document.getElementById...
一个基于Vue2的联动选择组件
内有功能:添加、删除、全选全不选、选中数量、选中删除 React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件,包括添加待办事项、显示待办...
React多选组件 React多选组件 安装: npm install --save @khanacademy/react-multi-select yarn add @khanacademy/react-multi-select 用法: 有关如何使用该组件的信息,请参见/src/stories/index.js的示例,但...
ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...
Vue.js 再封装elSelect,实现多选,全选,反选,失去焦点并隐藏;点击空白处会自动收起下拉菜单
SYSTABLE version1.2 table表格插件,是本人独立开发的后台通用系统SYSUI的...支持排序,checkbox全选,表格列宽拖拽,按钮操作,分页等table表格功能操作。 支持表格直接修改信息,支持checkbox单选框选择, 文本修改。
缓冲区细节视图EasyUI 网格组件的 BufferView 现在带有 DetailView 选项。 #USAGE ###1.介绍源码 requirejs.config({ baseUrl: '/js/lib', paths: { app: '../app', jquery: 'jquery.min', easyui: 'jquery.easyui....
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变...
表单输入域组件 对原生输入框做了封装,并在此基础上扩展。 提供的输入框种类 文本输入框 TextBox 所有输入框的基类。 支持的特性有: 支持输入框获取焦点时自动全选内容,开关功能 支持禁止粘贴,开关功能 支持内容...
示例之全选和反选以及取消 javascript必须加分号 示例之后台管理左侧菜单 今日内容梳理 本周作业 第16周 上节作业问题答疑 今日内容计划 CSS内容补充以及后台管理页面布局 后台管理页面布局 JavaScript内容回顾 ...
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大...Select 组件自定义菜单模式下无法全选问题修复 Number 最大最小值校验问题修复 sdk 中 dialog 里的编辑器弹窗被遮挡问题修复
• sample04.htm 在同一个网页中使用不同脚本语言 • sample05.htm 判断浏览器对JavaScript版本的支持情况 • sample06.htm 引用外部JavaScript • sample07.htm 在同一个HTML文档...
自动全选 ()"> ENTER键可以让光标移到下一个输入框 (event.keyCode==13)event.keyCode=9"> 文本框的默认值 (this.defaultValue)"> title换行 obj.title = "123
sdfs " 获得时间所代表的微秒 var n1 ...
python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 ...15 再插两道JavaScript面试题 16 Model操作之select_related以及...
全选按钮-选择当前所有董事会日期的选项。 是否查看日期,月份或年份。 板号-将组件配置为一块或两块板的选项。 安装 $ npm i dates-picker 用法 function callbackFunction ( dates ) { console . log ( `The ...
1,全选复制·快捷指令|可便捷解决手机复制scriptable代码问题 2,脚本订阅 作者: 序号 推荐指数 说明 友情链接 示意图 1个 ★★★★★ 支持查询全国所有省份的油价实时数据 2个 ★★★★★ 时间倒计时百分比 3 ...