布局如下:

<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. 为什么我们要给父级元素写overflow:hidden

    有这样的一种情况,有的时候,我们的父级元素设置了高度,一般来说,父级元素的高度是根据子元素的高度来自适应撑开的,如果我们的父级元素也设置了高度,那么其高度就不会随着子元素的的大小而自适应,也许有的时候 ...

  2. The superclass javax.servlet.http.HttpServlet was not found on the Java Build Path。

    项目上右键-->Build Path-->Configuration Build Path -->Add Library -->Server Runtime 选择tomcat

  3. 【原创】解决jquery在ie中不能解析字符串类型xml结构的xml字符串的问题

    $.fn.extend({ //此方法解决了ie中jquery不识别非xml的类型的xml字符串的问题 tony tan findX: function (name) { if (this & ...

  4. 【BZOJ 1096】【ZJOI 2007】仓库建设 DP+斜率优化

    后缀自动机看不懂啊QAQ 放弃了还是看点更有用的东西吧,比如斜率优化DP 先水一道 #include<cstdio> #include<cstring> #include< ...

  5. Oracle数据库下sde用户系统表开放权限sql语句

    --sde用户登陆执行以下语句 grant insert, update, delete on sde.table_registry to PUBLIC; grant insert, update, ...

  6. ubuntu15.10下搭建cordova+ionic开发环境

    安装jdk 在命令下输入java如果没有安装会提示该命令包含于openjdk软件包 sudo apt-get install openjdk然后按下tab会列出openjdk开头的软件包 我这里就选择 ...

  7. 时间复杂度---我又要想起初中数学老师的脸了xxxxx

    时间复杂度: 常用的时间复杂度有:常数级,对数级,线性级 线性对数级 平方级,立方级别,多项式级别,指数级别,阶乘级别 这里我们主要探讨对数级,线性级,平方级,指数级---为什么不讨论其他的?别的我也 ...

  8. 常用jquery片断

    **1.检测Internet Explorer版本** 当涉及到CSS设计时,对开发者和设计者而言Internet Explorer一直是个问题.尽管IE6的黑暗时代已经过去,IE也越来越不流行,它始 ...

  9. 如何提高redmine的访问速度

    刚开始使用redmine时 方法一: 可以采用nginx+passenger的方式来驱动redmine提升访问速度,但是在新建问题或更新问题时变得非常慢,这是因为在新建问题和更新问题时会发送邮件,而且 ...

  10. 【BZOJ-3709】Bohater 贪心

    3709: [PA2014]Bohater Time Limit: 5 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 835  Solved:  ...