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 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Mac 上切换Python多版本
2017/06/17 Python
分析Python读取文件时的路径问题
2018/02/11 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
青安岗事迹材料
2014/05/14 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
高中同学会致辞
2015/08/01 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript