js实现checkbox全选和反选示例

 更新时间:2014年05月01日 08:36:50   作者:  
这篇文章主要介绍了js实现checkbox全选和反选示例,需要的朋友可以参考下

复选框全选示例

复制代码 代码如下:

<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>

相关文章

  • js关闭子窗体刷新父窗体实现方法

    js关闭子窗体刷新父窗体实现方法

    本文将详细介绍js关闭子窗体刷新父窗体实现方法,需要了解的朋友可以参考下
    2012-12-12
  • JS的Document属性和方法小结

    JS的Document属性和方法小结

    Document想必大家并不陌生吧,在使用js的过程中会经常遇到它,那么它有哪些属性、哪些方法,在本文将以示例为大家详细介绍下,希望对大家有所帮助
    2013-09-09
  • javascript 触发事件列表 比较不错

    javascript 触发事件列表 比较不错

    javascript 触发事件列表,整理的一些js的事件,一般常用的就是onclick,onmouseover等。大家可以了解下,方便以后应用。
    2009-09-09
  • JavaScript入门之对象与JSON详解

    JavaScript入门之对象与JSON详解

    JSON是JavaScript中对象的字面量,是对象的表示方法,通过使用JSON,可以减少中间变量,使代码的结构更加清晰,也更加直观。使用JSON,可以动态的构建对象,而不必通过类来进行实例化,大大的提高了编码的效率
    2011-10-10
  • js关于字符长度限制的问题示例探讨

    js关于字符长度限制的问题示例探讨

    字符长度限制在某些特殊的使用场合还是比较实用的,下面为大家用示例探讨下,感兴趣的朋友可以参考下
    2014-01-01
  • Javascript中arguments对象详解

    Javascript中arguments对象详解

    JavaScript不能像PHP一样在函数参数中直接设置默认值,但是JavaScript有一个arguments可以使用,这就可以为函数参数设置默认值了
    2014-10-10
  • ie和firefox中img对象区别的困惑

    ie和firefox中img对象区别的困惑

    ie和firefox中img对象区别的困惑...
    2006-12-12
  • JavaScript中的this,call,apply使用及区别详解

    JavaScript中的this,call,apply使用及区别详解

    本文结合基本javascript的权威书籍中的内容,根据自己的理解,通过相关示例向大家展示了javascript中this,call,apply使用及区别,非常的细致全面,希望大家能够喜欢。
    2016-01-01
  • 浅谈一下JavaScript与C++的差异

    浅谈一下JavaScript与C++的差异

    这篇文章主要介绍了浅谈一下JavaScript与C++的差异,本来两门语言各有各的战场,并没什么交集,但自从 Node.js 框架出现之后,JavaScript 就摆脱了浏览器的樊笼,开始渗透进入系统应用的领域
    2023-04-04
  • Three.js源码阅读笔记(光照部分)

    Three.js源码阅读笔记(光照部分)

    好久没看Three.js源码了。今天天气不错,接着看;这次从光照部分看起:光照模型,从光线本身角度来看包括环境光、平行光、点光源,从物体表面材质角度看又包括漫反射和镜面反射,需要了解的朋友可以参考下
    2012-12-12

最新评论