CheckBox 如何实现全选?


Posted in Javascript onJune 23, 2006

在一个表单中有很多CheckBox,请问如何实现选种一个而让所有的都选中?  
---------------------------------------------------------------  

function  selectAll(checkBoxName){  
           var  elms  =  document.getElementsByName(checkBoxName);  
           if  (elms.length<1)  return;  
           var  allChecked  =  true;  
           for  (var  i=0;i<elms.length;i++)  
                       if  (elms[i].type=="checkbox")  
                                   allChecked  &=  elms[i].checked;  
           for  (var  i=0;i<elms.length;i++)  
                       if  (elms[i].type=="checkbox"){  
                                               elms[i].checked  =  !allChecked;  
                                               if  (elms[i].onclick)  elms[i].onclick();  
                       }  
}  
---------------------------------------------------------------  

<input  type=checkbox  name=m><input  type=checkbox  name=m><input  type=checkbox  name=m><input  type=checkbox  name=m>  
<input  type=checkbox  name=m><input  type=checkbox  name=m><input  type=checkbox  name=m><input  type=checkbox  name=m>    
 全选<input  type=checkbox  value="Check  All"  onclick="mm(this)">    

<script  language=javascript>      
function  mm(o)  
{  
     var  a  =  document.getElementsByName("m");  
     for  (var  i=0;  i<a.length;  i++){  
         a[i].checked  =  o.checked;  
     }  

}  
</script>

<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<br>
全选:<input type=checkbox onclick=sel('chk')>
<script language="javascript">
 function sel(a){ 
  o=document.getElementsByName(a) 
  for(i=0;i<o.length;i++) 
  o[i].checked=event.srcElement.checked 
 }
</script> 

Javascript 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
jQuery 操作XML入门
Dec 25 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 #Javascript
javascript 动态添加表格行
Jun 22 #Javascript
document 和 document.all 分别什么时候用
Jun 22 #Javascript
可输入的下拉框
Jun 19 #Javascript
强制设为首页代码
Jun 19 #Javascript
html下载本地
Jun 19 #Javascript
动态加载iframe
Jun 16 #Javascript
You might like
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python函数的5种参数详解
2017/02/24 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
Django实现快速分页的方法实例
2017/10/22 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
班组长竞聘书
2014/03/31 职场文书
维稳工作承诺书
2015/01/20 职场文书
工作简历自我评价
2015/03/11 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs