用一个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. [LeetCode#246] Missing Ranges Strobogrammatic Number

    Problem: A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked a ...

  2. python换行写入文件

    今天用python做写入文件时,碰到,写入的东西不能换行,打开写入的文件都是一行.后来发现需要在写入的字符后面加上+'\n'. 另外python需要追加写入文件的时候,是用这个方法f = open(' ...

  3. flat ui switch 改变状态而不响应事件

    Flat UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap实现.这套界面工具包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单 ...

  4. android逐行读取文件内容以及保存为文件

    用于长时间使用的apk,并且有规律性的数据 1,逐行读取文件内容 //首先定义一个数据类型,用于保存读取文件的内容 class WeightRecord { String timestamp; flo ...

  5. U盘做启动盘后，如何恢复原始容量

    上次用U盘装系统后,U盘缩水1G多,格式化和快速格式化,没有用,无法恢复U盘原来的容量,后来在网上查到一个方法,成功释放U盘空间,故将恢复方法写在下面. (1)右击“我的电脑”,选择“管理”选项,之后 ...

  6. TCP 的那些事儿（上）

    TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的过程却能让人有很多收获.关于TCP这个协议的细节,我还是推荐你去 ...

  7. Spark 中的join方式(pySpark)

    spark基础知识请参考spark官网:http://spark.apache.org/docs/1.2.1/quick-start.html 无论是mapreduce还是spark ,分布式框架的性 ...

  8. hdu4348 - To the moon 可持久化线段树 区间修改 离线处理

    法一:暴力! 让干什么就干什么,那么久需要可持久化线段树了. 但是空间好紧.怎么破? 不down标记好了! 每个点维护sum和add两个信息,sum是这段真实的和,add是这段整体加了多少,如果这段区 ...

  9. winfrom 底层类 验证码 分类： C# 2014-12-17 11:18 258人阅读 评论(0) 收藏

    效果图: 底层类: /// <summary>         /// 生成验证码         /// </summary>         /// <param n ...

  10. [PWA] Keynote: Progressive Web Apps across all frameworks

    PWA: Add to home screen Angular Universal Server side rendering: for achieving better proference on ...