<!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. Java的位运算符详解实例——与（&）、非（~）、或（|）、异或（^）

    位运算符主要针对二进制,它包括了:“与”.“非”.“或”.“异或”.从表面上看似乎有点像逻辑运算符,但逻辑运算符是针对两个关系运算符来进行逻辑运算,而位运算符主要针对两个二进制数的位进行逻辑运算.下面 ...

  2. blender源代码编译

    blender源码路径(svn):https://svn.blender.org/svnroot/bf-blender/trunk/blender/ 依赖外部Lib(svn):https://svn. ...

  3. POJ3208 Apocalypse Someday(二分 数位DP)

    数位DP加二分 //数位dp,dfs记忆化搜索 #include<iostream> #include<cstdio> #include<cstring> usin ...

  4. PostgreSQL的时间/日期函数使用

    PostgreSQL的常用时间函数使用整理如下: 一.获取系统时间函数 1.1 获取当前完整时间 select now(); david=# select now(); now ----------- ...

  5. golang time and duration

    package mainimport "fmt"import "time"func main() { p := fmt.Println // We'll sta ...

  6. Win10 安装Vs2015 社区版和企业版各个问题汇总

    1.前提下已经下载ISO文件 2.你的电脑没有连接网络或者你使用了宽带通类似的运营商网络. 3.你确保你正确安装了win10 并且已经激活 出现的问题如下 一.当你安装离线下载的ISO for Vs2 ...

  7. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...

  8. CF735D Taxes 哥德巴赫猜想\判定素数 \进一步猜想

    http://codeforces.com/problemset/problem/735/D 题意是..一个数n的贡献是它的最大的因子,这个因子不能等于它本身 然后呢..现在我们可以将n拆成任意个数的 ...

  9. Jmeter之安装（一）

    Jmeter Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 小七这边之前用jmeter ...

  10. 阿里云Linux系统挂载数据盘

    Linux云服务器数据盘未做分区和格式化,我们可以根据以下步骤进行分区以及格式化操作. 目录 [隐藏]  1 查看数据盘 2 对数据盘进行分区 3 查看新的分区 4 格式化新分区 5 添加分区信息 6 ...