我们经常会在网站上遇到一些多选的情况，下面我就来说说使用Dom写全选反选的思路。

全选思路：
首先，我们来分析一下知道，当我们点击"全选"复选框的时候，所有的复选框应该都被选中，那我们就可以给"全选"复选框注册一个事件，就是如果全选按钮被选中的话，那么其他所有复选框都被选中；然后就是其他复选框部分选中或全不选中，那么"全选"复选框不选中。

反选思路：
我们知道，当我们点击反选按钮，那么就把除"全选"之外的所有复选框的选中状态取反（之前选中的为不选中，之前不选中的为选中），在根据这些复选框的选中状态来判断"全选"是否选中。

<html>

    <head>

        <title></title>

        <script type="text/javascript">

            function f1(){

                var gender=document.getElementsByName("sex");

                for(var i=;i<gender.length;i++){

                    if(gender[i].checked){

                        alert(gender[i].value);

                        break;

                    }

                }

            }

            function checkAll(){

                var checkAll=document.getElementById("checkAll");

                var checkboxs=document.getElementsByTagName("input");

                for(var i=;i<checkboxs.length;i++){

                    if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

                        checkboxs[i].checked=checkAll.checked;

                    }

                }

            }

            window.onload=function(){

                var checkboxs=document.getElementsByTagName("input");

                for(var i=;i<checkboxs.length;i++){

                    if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

                        //给子checkbox动态注册事件

                        checkboxs[i].onclick=function(){

                            //定义一个变量记录"全选"checkbox的选中状态，默认为选中

                            var isCheckAll=true;

                            for(var j=;j<checkboxs.length;j++){

                                //过滤出不是checkbox和全选的控件

                                if(checkboxs[j].type=="checkbox"&&checkboxs[j].id!="checkAll"){

                                    //判断子checkbox控件是否选中

                                    if(!checkboxs[j].checked){

                                        //只要有一个checkbox控件没有选中，那么全选checkbox就不选中

                                        isCheckAll=false;

                                    }

                                }

                            }

                            document.getElementById("checkAll").checked=isCheckAll;

                        }

                    }

                }

            }

            function reCheck(){

                var checkboxs=document.getElementsByTagName("input");

                for(var i=;i<checkboxs.length;i++){

                    if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

                        checkboxs[i].checked=!checkboxs[i].checked;

                    }

                }

                var isCheckAll=true;

                for(var i=;i<checkboxs.length;i++){

                    if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

                        if(!checkboxs[i].checked){

                            isCheckAll=false;

                        }

                    }

                }

                document.getElementById("checkAll").checked=isCheckAll;

            }

        </script>

    </head>

    <body>

        <input type="radio" value="nan" name="sex"/>男

        <input type="radio" value="nv" name="sex"/>女<br/>

        <input type="button" value="性别" onclick="f1()"/><br/>

        <input id="checkAll" type="checkbox" onclick="checkAll()"/>全选<br/>

        <input id="check1" type="checkbox" value="chifan"/>吃饭<br/>

        <input id="check2" type="checkbox" value="shuijiao"/>睡觉<br/>

        <input id="check3" type="checkbox" value="dadoudou"/>打豆豆<br/>

        <input id="reCheck" type="button" value="反选" onclick="reCheck()"/><br/>

    </body>

</html>

Dom操作--全选反选的更多相关文章

  1. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  2. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  3. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  4. DOM操作复选框

    DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后,足球.篮球.游泳和唱歌均被选取.取消"全选/全不选"复选框之后,被选中的所有都变成未选中 ...

  5. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  6. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  7. jQuery全选反选插件

    (function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...

  8. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  9. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

随机推荐

  1. json-lib反序列化时(JSONObject.toBean)，时间类型为空的处理

    需求: 在我们的项目里希望JsonString传入日期类型值为空时,JSONObject.toBean时可以将Java对象的该日期属性设为null. 解决过程: json-lib反序列化Json字符串 ...

  2. [liu yanling]测试用例的设计方法

    一.功能测试      1.对话框测试输入进行测试.包括中文字符.英文字符.数字字符.特殊字符.及几种字符的组合.      2.对界面可操作按钮进行测试.包括[新增(N)][保存(S)][修改(M) ...

  3. as3+java+mysql(mybatis) 数据自动工具（二）

    AutoScript 项目结构如下图 ---AutoScript.java 为程序入口 ---com.autoscript.object 同步 as3 和 java 的数据类 ---com.autos ...

  4. mysql 5.5 中的示例数据库 employees

    http://dev.mysql.com/doc/employee/en/employees-installation.html

  5. ssh，telnet远程AIX以及数据传输问题

    (1)telnet远程 输入:telnet 目标IP 输入用户名,密码 进入远程机器 (2)AIX默认安装ftp,使用ftp传输数据 ftp 目标IP地址 输入用户名,密码(远程服务器的) 或者输入f ...

  6. 使用Windows Azure创建Linux系统虚拟机-上

    创建虚拟机来运行Linux 当您在Azure管理门户中使用映像图库时,创建运行Linux的虚拟机很容易.本指南告诉您如何做到这一点,假设你没有使用过Azure. 注意: 即使你不需要使用过Azure虚 ...

  7. node系列1

    NodeJS基础 JS是脚本语言,脚本语言都需要一个解析器才能运行,NodeJS就是一个解析器.nodejs.org 打开终端,键入node进入命令交互模式,可以输入一条代码语句后立即执行并显示结果 ...

  8. 算法导论学习-prim算法

    一. 关于最小生成树 对于无向连通图G=(V,E),其中V表示图的顶点,E表示图的边,对于每条边都有一个权值,可以理解为边a->b的权值C为从a走到b要走的路程为C.现在我们希望找到一个无回路的 ...

  9. TCP、UDP、IP包头结构分析（转）

    1.TCP数据段格式 TCP是一种可靠的.面向连接的字节流服务.源主机在传送数据前需要先和目标主机建立连接.然后,在此连接上,被编号的数据段按序收发.同时,要求对每个数据段进行确认,保证了可靠性.如果 ...

  10. nyoj 456 邮票分你一半

    邮票分你一半 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述      小珂最近收集了些邮票,他想把其中的一些给他的好朋友小明.每张邮票上都有分值,他们想把这些邮票分 ...