js全选与反选
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全选与反选的更多相关文章
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- JS——全选与反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js正则、js全选、反选、全不选、ajax批删
<button onclick="fun1()">全选</button><button onclick="fun2()">全 ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 前端之 JS 实现全选、反选、取消选中
需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...
- elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
随机推荐
- (转)java二维数组的深度学习（静态与动态）
转自:http://developer.51cto.com/art/200906/128274.htm,谢谢 初始化: 1.动态初始化:数组定义与为数组分配空间和赋值的操作分开进行:2.静态初始化:在 ...
- DOM解析，取得XML文件里面的信息
1 创建解析器工厂 DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); 2 解析器工厂对象创建解析器对象 Do ...
- [Hadoop] - TaskTracker源码分析(TaskTracker节点健康状况监控)
在TaskTracker中对象healthStatus保存了当前节点的健康状况,对应的类是org.apache.hadoop.mapred.TaskTrackerStatus.TaskTrackerH ...
- jsp内置对象的方法
JSP内置对象的方法:out:out.print();request:request对象主要用于出列客户端请求. 常用方法: String getParameter(String name) ...
- C# 图片平移及缩放
1.图片平移 Monitor.rar 在CSDN上下载,是个有地图编辑功能. http://download.csdn.net/detail/gxingmin/883699 2.图片缩放 http:/ ...
- ABP学习笔记
1. 用 Nhibernate:CountAsync 是定义在System.Data.Entity里的 var totalCount = await query.CountAsync(); 出现以 ...
- Redis Cluster部署、管理和测试
背景: Redis 3.0之后支持了Cluster,大大增强了Redis水平扩展的能力.Redis Cluster是Redis官方的集群实现方案,在此之前已经有第三方Redis集群解决方案,如Twen ...
- 每日java基础知识（01）
1.java语言的主要特点. 跨平台性:一个应用可以不经过修改,就直接在不同的平台上运行. 面向对象:java是面向对象的语言,可以使用对象封装事物的属性和行为,可以使用面向对象的思想进行分析设计,并 ...
- 设置debian的静态IP
欲设置的信息: IP地址:198.9.146.131 子网掩码:255.255.255.0 网关:198.9.146.254 DNS:198.9.9.1 198.9.9.2 首先编辑/etc/netw ...
- Junit使用教程
Junit是Java的单元测试工具,同时也是极限编程的好帮手.Junit4借助于Java5的Annotation(标注类)和静态导入的新特性,与Junit3有很大的区别,所以建议初学者直接使用Juni ...