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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
插件:检测javascript的内存泄漏
Mar 04 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
js代码实现轮播图
May 04 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 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获取apk包信息的方法
2014/08/15 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
浅析python协程相关概念
2018/01/20 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
了解AppleTalk协议吗
2014/04/01 面试题
采购内勤岗位职责
2013/12/10 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
法务专员岗位职责
2014/01/02 职场文书
师德演讲稿范文
2014/05/06 职场文书
新教师培训方案
2014/06/08 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
2016年五一促销广告语
2016/01/28 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python