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 动态改变图片大小
Jun 11 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
详解Vue单元测试case写法
May 24 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
论建造顺序的重要性
2020/03/04 星际争霸
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php实现的递归提成方案实例
2015/11/14 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
python网络编程实例简析
2014/09/26 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python实现银行管理系统
2019/10/25 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
主要负责人任命书
2014/06/06 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
java如何实现socket连接方法封装
2021/09/25 Java/Android