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 相关文章推荐
javascript iframe编程相关代码
Dec 28 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
JavaScript动态生成表格的示例
Nov 02 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截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHP发送短信代码分享
2015/08/11 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
python使用KNN算法识别手写数字
2019/04/25 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
如何使用Pytorch搭建模型
2020/10/26 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
《最佳路径》教学反思
2014/04/13 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
成事在人观后感
2015/06/16 职场文书
2016年过年放假安排通知
2015/08/18 职场文书