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中prevUntil()方法用法实例
Jan 08 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
Element InputNumber计数器的使用方法
Jul 27 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 魔术方法使用说明
2009/10/20 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
ext jquery 简单比较
2010/04/07 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
node.js中axios使用心得总结
2017/11/29 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python对常见数据类型的遍历解析
2019/08/27 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python中_del_还原数据的方法
2020/12/09 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
汽车运用工程毕业生自荐信
2013/10/29 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
节约粮食标语
2014/06/18 职场文书
优秀家长自荐材料
2014/08/26 职场文书
结婚堵门保证书
2015/05/08 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
红白喜事主持词
2015/07/06 职场文书
新学期开学寄语2016
2015/12/04 职场文书
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle