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 相关文章推荐
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 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
3种平台下安装php4经验点滴
2006/10/09 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php数组指针操作详解
2017/02/14 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
python基于itchat模块实现微信防撤回
2019/04/29 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python面试题之列表声明实例分析
2019/07/08 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
采购求职信
2014/03/17 职场文书
母校寄语大全
2014/04/10 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
医德医风个人总结
2015/02/28 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
入学证明
2015/06/23 职场文书