CheckBox 如何实现全选?

 更新时间:2006年06月23日 00:00:00   作者:  

在一个表单中有很多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> 

相关文章

  • 微信小程序 富文本转文本实例详解

    微信小程序 富文本转文本实例详解

    这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 数组中的push与concat的区别

    微信小程序 数组中的push与concat的区别

    这篇文章主要介绍了微信小程序 数组中的push与concat的区别的相关资料,需要的朋友可以参考下
    2017-01-01
  • JavaScript中fetch方法的使用示例全面详解

    JavaScript中fetch方法的使用示例全面详解

    这篇文章主要为大家介绍了JavaScript中fetch方法的使用示例全面详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 一篇文章学会jsBridge的运行机制

    一篇文章学会jsBridge的运行机制

    JSBridge是一座用JavaScript搭建起来的桥,搭建这座桥的目的也很简单,让native可以调用web的js代码,让web可以 “调用” 原生的代码。本文主要通过分析源码讲解jsBridge的运行机制,感兴趣的朋友一起来看看吧
    2021-09-09
  • umi插件开发仿dumi项目实现markdown文件转为页面

    umi插件开发仿dumi项目实现markdown文件转为页面

    这篇文章主要介绍了umi插件开发仿dumi项目实现markdown文件转为页面方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JavaScript的单线程和异步详细

    JavaScript的单线程和异步详细

    这篇文章要给大家分享的是JavaScript的单线程和异步,其实单线程和异步确实不能同时成为一个语言的特性,js选择了成为单线程的语言,所以它本身不可能是异步的,但js宿主环境是多线程,宿主环境通过某种方式使js具备了异步属性,下面就来具体介绍,需要的朋友可以参考一下
    2021-10-10
  • 徒手实现关于JavaScript的24+数组方法

    徒手实现关于JavaScript的24+数组方法

    数组是我们日常工作中用的最频繁的一类数据结构,能帮助我们解决许多问题,而其本身也包含接近33个之多的方法,做了一个脑图分类如下,熟练使用数组的你,是否想知道他们内部的实现原理呢?接下来小编就带大家进入主题,希望能帮助到你
    2021-09-09
  • Preload基础使用方法详解

    Preload基础使用方法详解

    preload 顾名思义就是一种预加载的方式,它通过声明向浏览器声明一个需要提交加载的资源,当资源真正被使用的时候立即执行,就无需等待网络的消耗
    2020-02-02
  • JavaScript数组去重方案

    JavaScript数组去重方案

    这篇文章主要介绍了JS数组方案,先总结一下我们数组的方法:pop、push、shift、unshift、slice、splice、sort、reverse、concat、join、indexOf、lastIndexOf、map、forEach,下面文章将详细对他们做个详细介绍,需要的朋友可以参考一下
    2021-09-09
  • 微信小程序 this和that详解及简单实例

    微信小程序 this和that详解及简单实例

    这篇文章主要介绍了微信小程序 this和that详解及简单实例的相关资料,需要的朋友可以参考下
    2017-02-02

最新评论