用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false，当所有checkbox都被选中时，全选按钮也被选中。

详解：

有两种方式使<input type="checkbox" />中的复选框被选中。

方法一:直接在HTML行间中添加checked属性。   eg：<input type="checkbox" checked />

方法二：使用javascript使input对象的checked="true";  eg: document.getElementsByTagName('input')[0].checked='true';

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>全选</title>

<script>

window.onload = function(){

    var aInput = document.getElementsByTagName('input');

    var oInput = aInput[0];

    var a = 0;

    var b = 0;

    aInput[0].onclick = function(){

        for (var i = 0; i < aInput.length; i++) {

            if(aInput[0].checked == true){

                aInput[i].checked = true;

            }else{

                aInput[i].checked = false;

            }

        }

    };

    for (var i = 1; i < aInput.length; i++) {

        aInput[i].onclick = function(){

            a = 0;

            b = 0;

            for (var i = 1; i < aInput.length; i++) {

                if (aInput[i].checked == false) {

                    a++;

                }else {

                    b++;

                }

            }

            if(a>0){

                oInput.checked = false;

            }else if(b==aInput.length-1){

                oInput.checked = true;

            };

        };

    }

};

</script>

</head>

<body>

<p><input type="checkbox" name="" />全选</p>

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

</body>

</html>

js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false的更多相关文章

  1. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  2. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  3. 用 JS 做一个数独游戏（二）

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

  4. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  5. 用 JS 做一个数独游戏（一）

    用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...

  6. Android ListView批量选择（全选、反选、全不选）

    APP的开发中,会常遇到这样的需求:批量取消(删除)List中的数据.这就要求ListVIew支持批量选择.全选.单选等等功能,做一个比较强大的ListView批量选择功能是很有必要的,那如何做呢? ...

  7. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  8. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  9. jquery easyui datagrid 获取Checked选择行(勾选行)数据

    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...

随机推荐

  1. nginx+tomcat配置https

    nginx代理https后,应用redirect https变成http,很多页面报404.情况类似http://blog.sina.com.cn/s/blog_56d8ea900101hlhv.ht ...

  2. 折腾iPhone的生活——越狱

    这次我也加入了越狱大军,也不是为的什么免费软件,只是遵从我玩机的本质,既然想要玩透这个机子,当然要所有都试过来,就果断越狱了,关于越狱的好处和坏处,我会在另外一篇博客里阐述,这篇博客主要就说怎么样进行 ...

  3. 《Linear Algebra and Its Applications》-chaper4-向量空间-子空间、零空间、列空间

    在线性代数中一个非常重要的概念就是向量空间R^n,这一章节将主要讨论向量空间的一系列性质. 一个向量空间是一些向量元素构成的非空集合V,需要满足如下公理: 向量空间V的子空间H需要满足如下三个条件: ...

  4. 找出数组中出现次数超过一半的数，现在有一个数组，已知一个数出现的次数超过了一半，请用O(n)的复杂度的算法找出这个数

    找出数组中出现次数超过一半的数,现在有一个数组,已知一个数出现的次数超过了一半,请用O(n)的复杂度的算法找出这个数 #include<iostream>using namespace s ...

  5. JavaScript之闭包与高阶函数（一）

    JavaScript虽是一门面向对象的编程语言,但同时也有许多函数式编程的特性,如Lambda表达式,闭包,高阶函数等. 函数式编程是种编程范式,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 ...

  6. assembly的说明

    Assembly SampleAssembly; // Instantiate a target object. Int32 Integer1 = new Int32(); Type Type1; / ...

  7. Java宝典

    本人最近参加了几家公司的面试,在其中发现了不少笔试题,虽然是平常再简单不过的,但一不小心还是会出错.今天特意找时间写下来和大家分享. 1.访问控制符权限问题.   同一个包中 同一个类中 不同包的子类 ...

  8. 深入浅出node(4) 异步编程

    一)函数式编程基础 二)异步编程的优势和难点 2.1 优势 2.2 难点 2.2.1 异常处理 2.2.2 函数嵌套过深 2.2.3 阻塞 2.2.4 多线程编程 2.2.5 异步转同步 三)异步编程 ...

  9. 《Linux设备驱动开发详解（第2版）》配套视频登录51cto教育频道

    http://edu.51cto.com/course/course_id-379-page-1.html http://edu.51cto.com/course/course_id-379-page ...

  10. PHP运行出现Notice : Use of undefined constant 的解决方法【已测】

    关闭 PHP 提示的方法 搜索php.ini:error_reporting = E_ALL改为:error_reporting = E_ALL & ~E_NOTICE还有个不是办法的办法就是 ...