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.math.BigDecimal()的用法

    Java中简单的浮点数类型float和double是不能进行运算的,不光Java,很多语言都是这样. 我们运行下面程序你将会看到 public class TestMathDecimal { publ ...

  2. 关于最优化读写，测试各个加锁：Lock、安全字典、信号量、ReaderWriterLock、ReaderWriterLockSlim

    大家对于自身项目中都有本地缓存的逻辑,但这块的读写何种机制下哪个快,哪个慢,需要测试对比,以下测试报告,期望给大家一个借鉴,如果有更好的测试结果也欢迎大家一起讨论. 以下测试是开启10个并发任务对同一 ...

  3. Angular企业级开发(7)-MVC之控制器

    1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起.大多数业务逻辑操作都会放在视图对应的控制器中.当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级Ang ...

  4. ACM 海贼王之伟大航路(深搜剪枝)

    "我是要成为海贼王的男人!" 路飞他们伟大航路行程的起点是罗格镇,终点是拉夫德鲁(那里藏匿着"唯一的大秘宝"--ONE PIECE).而航程中间,则是各式各样的 ...

  5. Cordova的搭建

    Cordova的搭建 cordova也叫phonegap,可以用来打包网页生成Android或iOS或其他平台的APP,它提供了一些native api,可以让网页调用本地函数,极大地增强了网页的功能 ...

  6. 【排序算法】快速插入排序算法 Java实现

    基本思想 每次将一个待排序的记录,按其关键字大小插入到前面已经排好序的子序列中的适当位置,直到全部插入完成. 设数组为a[0...n-1] 初始时,a[0]自成一个有序区,无序区为a[1...n-1] ...

  7. 【转】Netty系列之Netty是什么

    Netty是什么 大概用Netty的,无论新手还是老手,都知道它是一个“网络通讯框架”.所谓框架,基本上都是一个作用:基于底层API,提供更便捷的编程模型.那么”通讯框架”到底做了什么事情呢?回答这个 ...

  8. [转]云计算之hadoop、hive、hue、oozie、sqoop、hbase、zookeeper环境搭建及配置文件

     云计算之hadoop.hive.hue.oozie.sqoop.hbase.zookeeper环境搭建及配置文件已经托管到githubhttps://github.com/sxyx2008/clou ...

  9. MyBatis的类型自定义映射

    背景 利用MyBatis将数据库的时间类型映射成Java8的时间类型,引申对不同类型的自定义映射 实现方法 1.实现MyBatis中TypeHandler接口 @MappedTypes(value = ...

  10. 最近新版本的pangolin出现了点问题，我把可用的旧版本上传到了github

    经测试该版本编译没有问题. 下载地址:https://github.com/zzx2GH/Pangolin.git