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 png 透明解决方案(推荐)
Aug 21 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
zTree节点文字过多的处理方法
2017/11/24 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
详解Django框架中用context来解析模板的方法
2015/07/20 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python几种常见算法汇总
2020/06/02 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
网吧收银员岗位职责
2013/12/14 职场文书
母亲节感恩寄语
2014/02/21 职场文书
党员承诺书怎么写
2014/05/20 职场文书
电影雷锋观后感
2015/06/10 职场文书
外出听课学习心得体会
2016/01/15 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书