布局如下:

<p ><input type="checkbox" id="che1"/>全选</p>
<div id="div1">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>

javascript如下:

<script type="text/javascript">
window.onload=function()
{
xuanzhe();
}
function xuanzhe()//定义函数
{
var oChe1=document.getElementById('che1');//获取che1
var oDiv1=document.getElementById('div1').getElementsByTagName('input');//获取div里面的所有input oChe1.onclick=function()//定义che1的鼠标点击事件
{ for(var i=0;i<oDiv1.length;i++)
{
if(che1.checked==true)
{
oDiv1[i].checked=true;
}
else
{
oDiv1[i].checked=false;
}
} };
} </script>

能实现checkbox全选功能!  这种功能在网页是应用很广泛!

js初学—实现checkbox全选功能的更多相关文章

  1. Form - CHECKBOX全选功能

    FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...

  2. [置顶] 用mootools实现checkbox全选功能

    全选时,所有的单个checkbox都要选中,反过来也可以实现 //全选按钮 $('chkall').addEvent('click',function(){ $$('input[name=" ...

  3. js 表格上checkbox 全选

    <table class="layui-table"> <thead> <tr> <th width="75"> ...

  4. checkbox全选功能

    $("#cb_classType_all").change(function () { if ($(this).is(":checked")) { $(&quo ...

  5. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  6. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  7. JS实现全选功能

    000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...

  8. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  9. C# winform中的datagridview控件标头加入checkbox,实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

随机推荐

  1. Tomcat本地服务器搭建

    首先,下载jdk-8u111-windows-x64.exe,然后配置环境,以安装目录D:\jdk1.8.0_111为例: 新建一个变量: 然后打开path新建两个变量: 最后去控制台敲javac或者 ...

  2. HFS汉化版|简易HTTP服务器

    专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,只要解压缩后执 ...

  3. SpringMVC学习--文件上传

    简介 文件上传是web开发中常见的需求之一,springMVC将文件上传进行了集成,可以方便快捷的进行开发. springmvc中对多部件类型解析 在 页面form中提交enctype="m ...

  4. linux系统数据落盘之细节

      本文节选自这里,原文以mysql innodb系统为例,介绍了数据经过的各层级的buffer和cache,其它系统也有相似的原理,摘录于此. 3.  VFS层 该层的缓冲都放在主机内存中,它的目的 ...

  5. 对Ip地址进行验证

    依据正则表达式 boolean voliate(String ipString) {        // 匹配ip正则表达式        String ip = "([1-9]|[1-9] ...

  6. linux 远程桌面连接

    我们知道在windows下面我们可以用远程桌面连接来控制其它电脑, 但linux 远程桌面连接?不过在说怎样连接之前还是要先明确一个概念,为什么我标题没有用linux中的远程桌面连接呢, 这是因为Li ...

  7. [转]Hibernate查询对象所有字段,单个字段 ,几个字段取值的问题

    原文地址:http://www.ablanxue.com/prone_3552_1.html 1. 查询整个映射对象所有字段 Java代码 //直接from查询出来的是一个映射对象,即:查询整个映射对 ...

  8. HTML 5 video 标签跨浏览器兼容

    <video width="320" height="240" controls>   <source src="movie.mp4 ...

  9. 强连通 HDU 1269

    n点m边 求是否能从任意a->b b->a 强连通分量等于1 #include<stdio.h> #include<algorithm> #include<s ...

  10. 网络流最小割 POJ 3469

    题意  2个CPU n个任务 给出在第一个 第二个运行时的花费 m  个  a  b 不在同一个CPU运行的额外花费 建图 源点 ->   n    -> 汇点 权          a1 ...