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实现公告文字左右滚动的实例代码
Oct 29 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
iOS10推送通知开发教程
2016/09/19 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
python with statement 进行文件操作指南
2014/08/22 Python
简单了解什么是神经网络
2017/12/23 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
python解析多层json操作示例
2019/12/30 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
德国网上药房:Apotal
2017/04/04 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
5.1手机促销活动
2014/01/17 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
消防安全标语
2014/06/07 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
英文导游词
2015/02/13 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android