用一个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. java学习面向对象之内部类

    什么是面向对象内部类呢?所谓的内部类,即从字面意义上来理解的话,就是把类放到类当中. 那么内部类都有什么特点呢? 1.内部类可以访问包裹他的类的成员. 2.如果包裹他的类想访问被其包裹的类的话就得实例 ...

  2. -_-#【Better Code】throttle / debounce

    浅谈javascript的函数节流 javascript函数的throttle和debounce throttle 疯狂触发事件,固定步调执行 debounce 疯狂触发事件,不会执行 var res ...

  3. soundtouch源码分析__based on csdn ：

    1. soundtouch介绍和相关资源 The SoundTouch Library Copyright © Olli Parviainen 2001-2014 SoundTouch is an o ...

  4. JavaScript高级程序设计3.pdf

    do-while语句是一种后测试循环语句do {statement} while (expression),至少会循环一次 while语句是一种前测试循环语句while (expression) st ...

  5. Bzoj 1222: [HNOI2001]产品加工 动态规划

    1222: [HNOI2001]产品加工 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 486  Solved: 298[Submit][Status ...

  6. SRM 601(1-250pt,500pt)

    DIV1 250pt 题意:有很多袋子,里面装有苹果和橘子(也可能没有),给出每个袋子里有多少个苹果,多少个橘子.如果每个袋子里含有水果的总数都不小于x个,则可以从每个袋子里都拿出x个水果(拿出苹果和 ...

  7. android源码编译环境的准备及编译之后使用emulator运行的方法 - 官方版

    http://source.android.com/source/initializing.html http://blog.csdn.net/ithomer/article/details/6977 ...

  8. SharePoint 2013的100个新功能之网站管理（二）

    一:SharePoint 2013的网站策略 网站策略指的是自动关闭或删除网站的条件.有四个选项:不自动关闭或删除网站.自动删除网站.自动关闭并删除网站和运行一个工作流来关闭.删除网站. 二:新的主题 ...

  9. Python 函数的参数知识汇总

    函数搞不熟,后边就晕头转向了,在此重新归纳一下廖大神的函数教程,加深记忆 一.函数的参数分为: 位置参数 def power(x): # x 就是power(x)的一个位置参数,我们调用power(x ...

  10. 【android】ImageView的src和background的区别以及两者的妙用

    一.ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸 .src是图片内 ...