布局如下:

<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. C#之发送邮件汇总

    最近想搞个网站,其中找回密码用到了我们常见到的利用邮箱找回.利用邮箱的好处是可以有效确认修改密码者的身份. 百度了几篇博客,各有千秋.最终采用了QI Fei同志的博客,有Demo下载,看了看思路清晰, ...

  2. hadoop fs -mkdir testdata错误 提示No such file or directory

    解决方法: hadoop fs -mkdir -p testdata

  3. iOS开发中的错误整理,iOS9之后的UIWindow(TopWindow)以及UIWindow与statusBar的关系

    iOS9之后的UIWindow的问题(TopWindow),以及UIWindow与statusBar之间的联系 1.出现的问题 iOS9之后UIWindow必须要指定一个根控制器,不然会报错!iOS9 ...

  4. IntelliJ_编译一直报错“找不到符号”

    执行maven compile时一直报错"找不到符号",类 XXX 各种clean.compile都不行 最后执行Rebuild Project一次后解决   执行rebuild ...

  5. JavaScript写一个小乌龟推箱子游戏

    推箱子游戏是老游戏了, 网上有各种各样的版本, 说下推箱子游戏的简单实现,以及我找到的一些参考视频和实例: 推箱子游戏的在线DEMO : 打开 如下是效果图: 这个拖箱子游戏做了移动端的适配, 我使用 ...

  6. 通过lucene的StandardAnalyzer分析器来了解分词

    本文转载http://blog.csdn.net/jspamd/article/details/8194919 不同的Lucene分析器Analyzer,它对TokenStream进行分词的方法是不同 ...

  7. Maven异常Type Project configuration is not up-to-date with pom.xml. Run Maven->Update Project or use Quick Fix

    eclipse maven错误“Project configuration is not up-to-date with pom.xml. Run proje” 导入maven工程后,出现如下错误: ...

  8. js学习笔记4----数据类型

    1.ECMAScript:标准.核心 JS中的数据类型:数字(NaN).字符串(空隔也会占据长度).布尔值(true和false).函数.对象(obj.[].{}.null).undefined. t ...

  9. js的并行加载与顺序执行

    javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问 ...

  10. 去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

    去掉chrome(谷歌)浏览器默认的input.textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 1.使用Chrome的都知道,当鼠标 ...