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. 剖析Asp.Net Web API路由系统---WebHost部署方式

    上一篇我们剖析了Asp.Net路由系统,今天我们再来简单剖析一下Asp.Net Web API以WebHost方式部署时,Asp.Net Web API的路由系统内部是怎样实现的.还是以一个简单实例开 ...

  2. ESP8266使用详解--基于Lua脚本语言

    这些天,,,,今天终于看到了希望,,,天道酬勤 先说实现的功能...让ESP8266连接无线网,然后让它建立服务器,,我的客户端连接上以后,发给客户端发数据模块打印到串口,,往ESP8266串口里发数 ...

  3. mysql优化---订单查询优化:异步分页处理

    订单分页查询: 老的代码是顺序执行查询数据和计算总记录数,但是如果条件复杂的话(比如关联子表)查询的时间要超过20s种 public static PagedList<Map<String ...

  4. 快速排序的C语言实现

    #include <stdio.h> int qSort(int a[],int i,int j) { int h = i; int r = j; int x = a[h]; int f ...

  5. object c入门

    无意间看到Object C编写的程序,感觉蛮有意思的,记载下来,慢慢品味,也许会有用得上的时候.吼吼~~ 大部分有一点其他平台开发基础的初学者看到XCode,第一感想是磨拳擦掌,看到 Interfac ...

  6. Ant学习总结5（配合Ant视频8,9）

    重点: Ant的属性介绍:  <property name="build.dir" value="build"/>注意:一般对于常量都会定义成为属性 ...

  7. groovy学习(一)列表

    numbers = [11, 12, 13, 14]println(numbers[0])println(numbers[3])println(numbers[-1])//最左边的元素println( ...

  8. github fork, star and watch

    1 git fork git clone原版本的话,只有读权限,是不能直接把修改提交到服务器的. git fork会创建一个副本,然后就可以在这个上面进行开发了,开发了之后可以通过pull reque ...

  9. 关于ASP.NET Web Api的HelpPage文档注释问题

    关于ASP.NET Web Api的HelpPage文档注释问题 以前我用微软的HelpPage来自动生成的webAPI帮助文档.在使用了一段时间后发现只能显示Controller上面写的注释文档内容 ...

  10. 根据WaitType诊断故障

    在查询执行时,等待次数和等待时间在一定程度上指示查询的瓶颈,甚至非常有助于对系统进行诊断.偶尔一次的异常等待,不足以表明系统存在瓶颈,但是,SQL Server实例经常出现特定的等待类型,并且等待时间 ...