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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 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 IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP中“=&gt;
2019/03/01 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python基于动态规划算法计算单词距离
2015/07/25 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
关于python多重赋值的小问题
2019/04/17 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
入团者的自我评价分享
2013/12/02 职场文书
银行授权委托书格式
2014/10/10 职场文书
七一建党节慰问信
2015/02/14 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技