用一个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#274]H-Index

    Problem: Given an array of citations (each citation is a non-negative integer) of a researcher, writ ...

  2. Ubuntu 桌面歌词

    Ubuntu 有个用来显示歌词软件叫 osd-lyrics. 这个软件的强大之处在于他可以和各种播放器配合, 并且可以自动下载歌词. 自从升级到14.04后不能用了,便以为该软件被废弃了. 无意中发现 ...

  3. bzoj1071

    朴素的做法显然是O(n3)的考虑优化,我们将约束条件变形为A*h+B*v<=A*minh+B*minv+c右边是一个定值,当右边确定了minh之后,随着minv的增大,原来满足条件的且v> ...

  4. bzoj1560

    首先这种题目肯定是要先排序,以x为第一关键字,y为第二关键字不难想到O(n2)的dp,下面显然要优化不难发现,由于两点的耗费是坐标差的平方的和,不带根号,因此,不难发现一个很有用的性质,如果从A点能到 ...

  5. codeforces -- 283A

    A. Cows and Sequence time limit per test 3 seconds memory limit per test 256 megabytes input standar ...

  6. Quartus中例化工程

    一般的例化工程,需要将要例化的对象的硬件语言放入到当前工程中,比如A要例化B,需要将B的编程文件加入当前工程进来. 还有一种方法不用这么麻烦,A工程用要例化B时,在library添加B的工程路径,就可 ...

  7. JavaScript onConflict 处理

    jQuery.noConflict用于释放jQuery和$两个全局变量. <!DOCTYPE html> <html> <head> <meta http-e ...

  8. win7限制登录时间的设置方法

    win7使用Net User命令行语句限制登录时间的方法: 1.单击“开始”,然后单击“运行”. 2.在“打开”框中,键入cmd,然后单击“确定”. 3..键入 net user username / ...

  9. Android RecyclerView使用（一）

    RecyclerView一种可以替换掉listview gridview 瀑布流等控件的新视图控件,控制视图回收和复用 ==优化内存可以替换listview 与listview的不同之处是:listv ...

  10. javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...