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 相关文章推荐
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
javascript操作referer详细解析
Mar 10 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
微信小程序实现watch监听
Jun 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python实现图片转字符画的完整代码
2021/02/21 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
创业计划书如何编写
2014/02/06 职场文书
感恩节活动策划方案
2014/05/16 职场文书
班风口号
2014/06/18 职场文书
亚运会口号
2014/06/20 职场文书
运动会演讲稿200字
2014/08/25 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang
python APScheduler执行定时任务介绍
2022/04/19 Python
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电