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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
div层的移动及性能优化
Nov 16 Javascript
Javascript调用C#代码
Jan 17 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
Vue中引入svg图标的两种方式
Jan 14 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
让焦点自动跳转
2006/07/01 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
跟老齐学Python之数据类型总结
2014/09/24 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
护士年终个人总结
2015/02/13 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
Python如何配置环境变量详解
2021/05/18 Python