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图片的展开和收缩实现代码
Apr 16 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 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+oracle 分页类
2006/10/09 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
python如何让类支持比较运算
2018/03/20 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python实现推箱子游戏
2020/03/25 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
python安装及变量名介绍详解
2020/12/12 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
英语感恩演讲稿
2014/01/14 职场文书
冰峪沟导游词
2015/02/09 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
学前班教学反思
2016/02/24 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python