js实现checkbox全选和反选示例


Posted in Javascript onMay 01, 2014

复选框全选示例

<input type="checkbox" name="selectall" value=on onclick="selectAll()">
function selectAll(form) {
 var obj = document.getElementsByName('selectall');
 var cks = document.getElementsByTagName("input");
 var ckslen = cks.length;
 for(var i=0;i<ckslen-1;i++) {
  if(cks[i].type == 'checkbox') {
   cks[i].checked = obj[0].checked;
  }
 }
}

复选框全选与全不选示例

<html>
<head>
<script>
function selectAll(){
 var checklist = document.getElementsByName ("selected");
   if(document.getElementById("controlAll").checked)
   {
   for(var i=0;i<checklist.length;i++)
   {
      checklist[i].checked = 1;
   } 
 }else{
  for(var j=0;j<checklist.length;j++)
  {
     checklist[j].checked = 0;
  }
 }
}
</script>
</head>
<body>
<form>
<input onclick="selectAll()" type="checkbox"   name="controlAll" style="controlAll" id="controlAll"/>全选<br>
1:<input type="checkbox" name="selected" value="1"/><br>
2:<input type="checkbox" name="selected" value="2"/><br>
3:<input type="checkbox" name="selected" value="3"/><br>
4:<input type="checkbox" name="selected" value="4"/><br>
5:<input type="checkbox" name="selected" value="5"/><br>
6:<input type="checkbox" name="selected" value="6"/><br>
</form>
<p>
js按键事件说明<br>
onClick事件<br>
鼠标单击事件是最常见的事件之一,当用户单击鼠标按钮时。同时onClick指定的事件处理程序或代码将被调用执行。<br>
文件说明<br>
第11行使用 onClick事件弹出警告提示对话框。<br>
onChange事件<br>
onChange事件就是当文本框的内容改变时发生的事件。<br>
文件说明<br>
第11行使用onChange事件,当文本框内容发生改变的时候弹出警告提示对话框。<br>
onSelect事件<br>
onSelect事件就是当文本框的内容被选中时发生的事件。<br>
文件说明<br>
第11行使用onSelect事件,当文本框中内容被选中的时候,警告提示对话框显示的结果。<br>
onFocus事件<br>
onFocus事件就是当光标落在文本框中时发生的事件。<br>
文件说明<br>
第12行使用Onfocus事件,当用鼠标选中第二个文本框的时候,自动触发Onfocus事件,弹出一个对话框。<br>
onLload事件<br>
onload事件是当前的网页被显示时发生的事件。<br>
文件说明<br>
第9行使用OnLoad事件,当打开网页的时候自动打开一个警示框。<br>
onUnload事件<br>
onUnload事件是当当前的网页被关闭时发生的事件。<br>
文件说明 <br>
第9行使用onUnload事件,当关闭网页的时候自动打开一个警示框。<br>
onBlur事件<br>
onBlur事件就是当光标离开文本框中时发生的事件。<br>
15  <br>
文件说明<br>
第12行使用onBlur事件,当用鼠标离开第二个文本框的时候,自动触发onBlur事件,弹出一个对话框。<br>
onMouseover事件<br>
onMouseover事件是指当鼠标移动到页面元素上方时发生的事件。、、<br>
文件说明<br>
第10行使用onMouseover事件,当鼠标指向滚动文字的时候,自动触发onMouseover事件。<br>
onMouseout事件<br>
onmouseout事件是指当鼠标离开页面元素上方时发生的事件。文件说明<br>
第10行使用onmouseout事件,当鼠标离开滚动文字的时候,自动触发 onmouseout事件。<br>
onDbclick事件<br>
当鼠标双击鼠标按钮时,产生ondbclick事件。同时ondbclick指定的事件处理程序或代码将被调用执行。<br>
文件说明<br>
第11行使用ondbclick事件弹出警告提示对话框。<br>
</p>
</body>
</html>
Javascript 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
获取body标签的两种方法
Oct 13 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
jquery插件之定时查询待处理任务数量
May 01 #Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 #Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 #Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 #Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 #Javascript
js获取ajax返回值代码
Apr 30 #Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 #Javascript
You might like
php防止SQL注入详解及防范
2013/11/12 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
python文件操作之目录遍历实例分析
2015/05/20 Python
用Django写天气预报查询网站
2018/10/21 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
指针和引用有什么区别
2013/01/13 面试题
港湾网络笔试题
2014/04/19 面试题
劳资人员岗位职责
2013/12/19 职场文书
英语演讲稿范文
2014/01/03 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
python实现简易名片管理系统
2021/04/11 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android