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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
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设置一边执行一边输出结果的代码
2013/09/30 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
django用户登录和注销的实现方法
2018/07/16 Python
python修改txt文件中的某一项方法
2018/12/29 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
一套Java笔试题
2016/08/20 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
档案接收函范文
2014/01/10 职场文书
员工工作表扬信范文
2014/01/13 职场文书
美术专业个人自我评价
2014/01/18 职场文书
高中数学教学反思
2014/01/30 职场文书
2014年高考决心书
2014/03/11 职场文书
答谢会策划方案
2014/05/12 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
考试没考好检讨书
2015/05/06 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
检讨书之工作不认真
2019/08/14 职场文书