<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>【JavaScripst效果】全选、全不选、反选</title>
<style>
h2, ul, p { margin: 0; padding: 0; }
ul { list-style: none; }
h2 { font-size: 100%; text-indent: 5px; }
input { vertical-align: -2px; *vertical-align: -1px; }
.m-box { width: 400px; border: 1px #666 solid; margin: 0 auto; font: 12px/30px 'microsoft yahei'; }
.m-box .hd,.m-box .ft { background-color: #ccc; }
.m-box .bd { overflow-x: hidden; overflow-y: auto; position: relative; height: 120px; }
.m-box .bd li label { display: block; height: 30px; vertical-align: top; }
</style>
</head>
<body>
<div class="m-box">
<h2 class="hd">选择列表</h2>
<ul class="bd" id="j-itemBox">
<li><label><input type="checkbox" name="item" value="1"/>选项1</label></li>
<li><label><input type="checkbox" name="item" value="2"/>选项2</label></li>
<li><label><input type="checkbox" name="item" value="3"/>选项3</label></li>
<li><label><input type="checkbox" name="item" value="4"/>选项4</label></li>
<li><label><input type="checkbox" name="item" value="5"/>选项5</label></li>
<li><label><input type="checkbox" name="item" value="6"/>选项6</label></li>
<li><label><input type="checkbox" name="item" value="7"/>选项7</label></li>
<li><label><input type="checkbox" name="item" value="8"/>选项8</label></li>
<li><label><input type="checkbox" name="item" value="9"/>选项9</label></li>
<li><label><input type="checkbox" name="item" value="10"/>选项10</label></li>
</ul>
<p class="ft"><label><input type="checkbox" id="j-checkAll"/>全选</label>&nbsp;<a href="javascript:void(0);" id="j-checkReverse">反选</a>&nbsp;<a href="javascript:void(0);" id="j-checkOk">确定</a></p>
</div>
<script>
/* by jununx@gmail.com */
function Check(options){
this.oItemsBox = options.oItemsBox;
this.aItems = options.aItems;
this.oCheckAll = options.oCheckAll;
this.oCheckReverse = options.oCheckReverse;
this.oCheckOk = options.oCheckOk;
}
Check.prototype = {
init : function(){
var that = this;
//根据选项更新全选
this.oItemsBox.onclick = function(e){
var ev = e || window.event, target = ev.target || ev.srcElement;
if(target.tagName.toLowerCase() === "input"){
that.checkReverse(that);
}
};
//全选操作
this.oCheckAll.onclick = function(){
that.checkAll();
};
//反选操作
this.oCheckReverse.onclick = function(){
that.checkReverse(that, true);
};
//确定
this.oCheckOk.onclick = function(){
var test = that.checkReverse(that);
alert("您选择了value是:【"+test+"】的选项!");
};
},
//全选/全不选
checkAll : function(){
for(var i = 0, len = this.aItems.length; i < len; i++){
this.aItems[i].checked = this.oCheckAll.checked;
}
},
//根据选项更新全选
checkReverse : function(that, isReverse){
for(var i = 0, n = 0, arr = [], len = that.aItems.length; i < len; i++){
if(isReverse){
that.aItems[i].checked = !that.aItems[i].checked;
}
if(that.aItems[i].checked){n++;arr.push(that.aItems[i].value)}
}
that.oCheckAll.checked = len == n;
return arr;
}
}; //实例化
var myCheck = new Check({
oItemsBox : document.getElementById('j-itemBox'),
aItems : document.getElementsByName('item'),
oCheckAll : document.getElementById('j-checkAll'),
oCheckReverse : document.getElementById('j-checkReverse'),
oCheckOk : document.getElementById('j-checkOk')
});
myCheck.init();
</script>
</body>
</html>

纯JavaScripst的全选、全不选、反选 【转】的更多相关文章

  1. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. 全选全不选案例table表格

    全选全不选案例table表格 案例一纯table表格 <table class="table table-bordered"> <thead class=&quo ...

  3. 在jquery中,全选/全不选的表示方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  5. checkbox实现全选全不选

    1.jQuery实现checkbox全选全不选 <!DOCTYPE html> <head runat="server"> <title>jQu ...

  6. Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  7. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  8. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  9. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

随机推荐

  1. mysql优化学习笔记

    优化sql的一般步骤 通过show status了解各种sql的执行频率 定位执行效率低的sql语句 通过explain分析效率低的sql 通过show profile分析sql 通过trace分析优 ...

  2. JAVA基础学习之IP简述使用、反射、正则表达式操作、网络爬虫、可变参数、了解和入门注解的应用、使用Eclipse的Debug功能(7)

    1.IP简述使用//获取本地主机ip地址对象.InetAddress ip = InetAddress.getLocalHost();//获取其他主机的ip地址对象.ip = InetAddress. ...

  3. WCF分布式开发必备知识(1):MSMQ消息队列

    本章我们来了解下MSMQ的基本概念和开发过程.MSMQ全称MicroSoft Message Queue,微软消息队列,是在多个不同应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一 ...

  4. jquery 生成 html 绑定

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. mysql 查询优化规则

    .请不要在SELECT中使用DISTINCT: #会用到临时表 .尽可能不要SELECT *,而应该查询需要用到的指定几个字段: .不要对两个大表进行联合,无论是内联或外联.对于需要对两个或多个表进行 ...

  6. PHPCMS V9 栏目列表调用文章点击量及评论数量方法

    很多朋友在用Phpcms做站时,具体需要在列表页.首页调用文章列表调用文章的点击量和评论排行,那么怎么才能做到在Phpcms v9首页.频道页.列表页.推荐位等页面获取文章浏览量和评论统计呢? 原因起 ...

  7. CQRS及.NET中的参考资料

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:CQRS作为一种设计模式,其实一点都不新鲜了.不过今天有朋友感叹.NET朋友也关注CQ ...

  8. SSH Key连接github提示Permission denied (publickey).错误

    root@debian64:/home/xiaoliuzi/.ssh/key_backup# ssh -T git@github.com The authenticity of host 'githu ...

  9. IM即时通讯实现原理

      即时通讯(Instant Messenger,简称IM)软件多是基于TCP/IP和UDP进行通讯的,TCP/IP和UDP都是建立在更低层的IP协议上的两种通讯传输协议.前 者是以数据流的形式,将传 ...

  10. SQLServer 维护脚本分享(10)索引

    --可添加索引的字段 migs.user_seeks,migs.avg_total_user_cost,migs.avg_user_impact,migs.last_user_seek ,mid.st ...