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 ...
随机推荐
- Professional C# 6 and .NET Core 1.0 - Chapter 39 Windows Services
本文内容为转载,供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处:Professional C# 6 and .NET Core 1.0 - Chapter 39 Windows Servi ...
- 数据库MySQL调优实战经验总结
MySQL 数据库的使用是非常的广泛,稳定性和安全性也非常好,经历了无数大小公司的验证.仅能够安装使用是远远不够的,MySQL 在使用中需要进行不断的调整参数或优化设置,才能够发挥 MySQL 的最大 ...
- SpringMVC中404错误解决方法总结
在新手配置Spring MVC的时候,感觉都弄好了之后,运行起来却显示404错误. 网上对出现404的问题不同情况,都有了解决方法,前几天我也遇到了这个问题,顺便把这些问题总结一下. 解决问题最重要的 ...
- Asp.net mvc 知多少（八）
本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问[http: ...
- 1023: [SHOI2008]cactus仙人掌图(DP+单调队列优化)
这道题吗= =首先解决了我多年以来对仙人掌图的疑问，原来这种高大上的东西原来是这个啊= = 然后，看到这种题，首先必须的就是缩点= = 缩点完之后呢，变成在树上找最长路了= =直接树形dp了 那么那些 ...
- 使用splice实现高效的代理服务器
很多网络应用场景下, 当原设备与目标设备无法直接建立连接时,这时就需要一台代理服务器进行中转.代理服务器只需要将来自源设备的报文 原封不动的转发给目标设备,而并不需要知道报文的具体内容.在这种情况下, ...
- mongodb c api编译
1. autoconf-latest.tar.gz http://ftp.gnu.org/gnu/autoconf/ tar xzvf autoconf-latest.tar.gz ./configu ...
- UWP: 体验应用内购新接口——StoreContext类
Windows 1607 版本(内部版本 14393)之后,微软在 SDK 添加了一些与应用商店相关的新接口,像应用试用与购买.应用内购等.这些接口相对于原来的接口要方便很多.就拿应用内购来说,以前的 ...
- MySQL Innodb 并发涉及参数
1 参数作用 MySQL的各个插件式引擎中,都会对事务及线程做一定的处理和优化.在Innodb引擎中,总是尝试保持 innodb内 操作系统的线程数(暂命名为innodb_thread) 应该小于或等 ...
- angular destroy & jquery destroy
destroy的目的是为了内存溢漏,这对性能会造成影响. angular scope在处理element 移除时,会触发destroy, 而调用逻辑和jquery使用的一样. 在ck editor 中 ...