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. Professional C# 6 and .NET Core 1.0 - Chapter 39 Windows Services

    本文内容为转载,供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - Chapter 39 Windows Servi ...

  2. 时间戳 获得当前时间 -iOS

    //获取当前时间戳 static inline NSString * getTimeStamp(){ NSTimeInterval d=[[NSDate date] timeIntervalSince ...

  3. spring入门--Spring框架底层原理

    上一篇的博客,我们可以看出来,spring可以维护各个bean (对象),并向其中注入属性值.那么,如果们要把一个对象的引用注入另外一个对象呢?应该怎么处理呢? 我们知道,对于对象中的属性来说,我们注 ...

  4. js加载XML文件

    // XML文件 <?xml version="1.0" encoding="gb2312"?> <root> <father n ...

  5. 从并发处理谈PHP进程间通信（二）System V IPC

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  6. 安装和配置Symfony

    为了简化创建新项目的过程,Symfony提供一个安装程序. 安装Symfony Installer 使用Symfony Installer是创建新的Symfony项目的唯一推荐方式,这个install ...

  7. [java多线程] - 锁机制&同步代码块&信号量

    在美眉图片下载demo中,我们可以看到多个线程在公用一些变量,这个时候难免会发生冲突.冲突并不可怕,可怕的是当多线程的情况下,你没法控制冲突.按照我的理解在java中实现同步的方式分为三种,分别是:同 ...

  8. 缓冲流自动把getchar()填充

    #include"stdio.h" #include"conio.h" #include<stdlib.h> int main() { char c ...

  9. unity Editor的使用

    1.首先定义一个需要控制数值的类,类中定义若干个变量 using UnityEngine;using System.Collections; using UnityEngine; using Syst ...

  10. UIView和layer的关系

    UIView和layer的关系 UIView是layer的代理 View的根layer ---也就是说view本身自带一个layer, 这个layer 我们叫它根layer 所有视图显示是因为继承UI ...