HTML结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<input type="checkbox" id="selectall"/>全选
<div id="div">
　　<input type="checkbox" />A<br />
　　<input type="checkbox" />B<br />
　　<input type="checkbox" />C<br />
　　<input type="checkbox" />D<br />
　　<input type="checkbox" />E<br />
　　<input type="checkbox" />F<br />
</div>
</body>
</html>

CSS样式：

.div1{width:300px; height:100px; border:1px solid #09F;}
label{display:block; margin-bottom:20px;}

原生Javascript代码：

<script>
var oSelectall = document.getElementById("selectall");
var aCheck = document.getElementById("div").getElementsByTagName("input");
oSelectall.onclick = function(){
　　for(var i=0; i<aCheck.length;i++){
　　　　f(this.checked==true){
　　　　　　aCheck[i].checked = true;
　　　　}else{
　　　　　　aCheck[i].checked = false;
　　　　}
　　}
}
var all_length = aCheck.length;
var add_all = 0;
for(var i=0; i<aCheck.length;i++){
　　aCheck[i].onclick = function(){
　　　　if(this.checked==true){
　　　　　　add_all++;
　　　　}else{
　　　　　　add_all--;
　　　　}
　　　　if(add_all == all_length){
　　　　　　oSelectall.checked = true;
　　　　}else{
　　　　　　oSelectall.checked = false;
　　　　}
　　}
}
</script>

jQuery源码：

<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
　　$('#selectall').click(function(){
　　　　if(this.checked==true){
　　　　　　$('#div').find('input').prop('checked',true); 
　　　　}else{
　　　　　　$('#div').find('input').prop('checked',false);
　　　　}
　　});
　　var input_length = 0;
　　$('#div').find('input').click(function(){
　　　　if(this.checked){
　　　　　　input_length++;
　　　　}else{
　　　　　　input_length--;
　　　　}
　　　　if(input_length == $('#div').find('input').length){
　　　　　　$('#selectall').prop('checked',true);
　　　　}else{
　　　　　　$('#selectall').prop('checked',false);
　　　　}
　　});
});
</script>

js全选与反选的更多相关文章

  1. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  2. JS——全选与反选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js正则、js全选、反选、全不选、ajax批删

    <button onclick="fun1()">全选</button><button onclick="fun2()">全 ...

  4. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  5. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  7. 前端之 JS 实现全选、反选、取消选中

    需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...

  8. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

  9. 复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...

随机推荐

  1. java静态初始化代码块

    /* * 为什么Java中为什么没有静态构造函数.其实Java中不叫静态构造函数,称作静态初始化,或者静态代码块. * 可以通过这样的代码实现相同的功能: */ public class test { ...

  2. 用9种办法解决 JS 闭包经典面试题之 for 循环取 i

    2017-01-06 Tomson JavaScript 转自 https://segmentfault.com/a/1190000003818163 闭包 1.正确的说,应该是指一个闭包域,每当声明 ...

  3. oracle中的net manager 无法配置

    今天遇到配置oracle net manager时无法配置,点击服务命名下面没有节点,绿色加号也没有反应 后在网上查到是因为tnsnames文件中的有空格存在导致 文件路径:oracle/produc ...

  4. JavaScript中的this关键字的用法和注意点

    JavaScript中的this关键字的用法和注意点 一.this关键字的用法 this一般用于指向对象(绑定对象); 01.在普通函数调用中,其内部的this指向全局对象(window); func ...

  5. JLOI2015 解题报告

    JLOI2015 真的不愧是NOI出题组出的,题目难度够吊.不过每一道都是结论题和乱搞题真的很不好玩... T1:[JLOI2015]有意义的字符串 首先贴下popoqqq的blog吧 感性的认识就是 ...

  6. [Hadoop] - Cannot run program "cmake"

    在编译hadoop的过程中,遇到缺少cmake命令的异常,异常信息为:Cannot run program "cmake" (in directory "/opt/wor ...

  7. 在.NET Core控制台应用程序中使用强类型配置

    想象一下,你写一个控制台应用程序,你想要从配置文件中以强类型方式读取配置. .NET Core 可以帮助我们解决. 通常我会在ASP.NET Core MVC中演示,但简单起见,只在控制台应用程序中演 ...

  8. Android系统--Binder系统具体框架分析（二）Binder驱动情景分析

    Android系统--Binder系统具体框架分析(二)Binder驱动情景分析 1. Binder驱动情景分析 1.1 进程间通信三要素 源 目的:handle表示"服务",即向 ...

  9. JAVA 在程序中存储和修改信息

    1.语句和表达式 计算机程序是一组告诉计算机什么的指令,每一个指令称为语句. 2.指定变量类型 变量名.变量存储的信息类型 整型int(-2.14*109~2.14*109).浮点型float(38位 ...

  10. Docker存储驱动之AUFS简介

    简介 AUFS是曾是Docker默认的首选存储驱动.它非常稳定.有很多真实场景的部署.很强的社区支持.它有以下主要优点: 极短的容器启动时间. 有效的存储利用率. 有效的内存利用率. 虽然如此,但由于 ...