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 学习笔记(六)
Dec 31 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python 实现进度条的六种方式
2021/01/06 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
歌唱比赛获奖感言
2014/01/21 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
关于运动会的口号
2014/06/07 职场文书
2016中秋节广告语
2016/01/28 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis