html table之全选，全不选

就是这个小功能让我和组长引发争端，就是这个小功能让我差点“被”辞职，就是这个自封装的js方法让我放下了对组长的敬畏之心，现在分享一下，其实也很简单，但是真的有这么简单吗？

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>check test</title>

</head>

<body>

  <form name="formGroup" id="formGroup" action="#" method="post" target="_self">

    <table border="1" cellpadding="2" cellspacing="1" class="table_hide">

      <tr class="table_title">

        <td width="50" align="center" class="text_center">序号</td>

        <td width="40" align="center" class="text_center">选择</td>

        <td width="100" align="center"></td>

        <td width="100" align="center"></td>

      </tr>

      <tr>

        <td align="center" class="text_center">1</td>

        <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>

        <td align="center"></td>

        <td align="center"></td>

      </tr>

      <tr>

        <td align="center" class="text_center">2</td>

        <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>

        <td align="center"></td>

        <td align="center"></td>

      </tr>

      <tr>

        <td align="center" class="text_center">3</td>

        <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>

        <td align="center"></td>

        <td align="center"></td>

      </tr>

      <tr>

        <td align="center">全选</td>

        <!-- 复选框单击方式 -->

        <td align="center"><input name="" type="checkbox" class="input_hide" onClick="CheckSelect(this.form);return false;" value=""></td>

        <!-- 按钮方式，本质无区别 -->

        <td align="center"><input name="" type="button" class="input_hide" onClick="CheckSelect(this.form);return false;" value="选/反选"></td>

        <td align="center"></td>

      </tr>

    </table>

  </form>

</body>

<script type="text/javascript">

  // 选择或者反选 checkbox

  function CheckSelect(thisform)

  {

    // 遍历 form

    for ( var i = 0; i < thisform.elements.length; i++)

    {

      // 提取控件

      var checkbox = thisform.elements[i];

      // 检查是否是指定的控件

      if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === false)

      {

        // 正选

        checkbox.checked = true;

      }

      else if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === true)

      {

        // 反选

        checkbox.checked = false;

      }

    }

  }

</script>

</html>

这种，应用的是表单控件遍历，很简单，但是，不合适我们的应用。

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

<table>

    <tr>

        <td><input type="checkbox" id="ca" onchange="DX()"></td>

        <td><input type="button" value="ceshi" onclick="Test()" /></td>

    </tr>

    <tr>

        <td><input type="checkbox" name="cb" id="cb0" value="12" onchange="GB(this.id)"></td>

        <td>liweizhong</td>

    </tr>

    <tr>

        <td><input type="checkbox" name="cb" id="cb1" value="34" onchange="GB(this.id)"></td>

        <td>liweizhong</td>

    </tr>

    <tr>

        <td><input type="checkbox" name="cb" id="cb2" value="56" onchange="GB(this.id)"></td>

        <td>liweizhong</td>

    </tr>

</table>

<script type="text/javascript">

    function DX() {//全选，全不选

        var b = document.getElementById("ca").checked;

        var c = document.getElementsByName("cb");

        var ad=c.length;

        if (b == true) {

            for (var i = 0; i < ad; i++) {

                var id = "cb" + i;

                document.getElementById(id).checked = true;

                var result = document.getElementById(id).checked;

            }

        } else {

            for (var i = 0; i < ad; i++) {

                var id = "cb" + i;

                document.getElementById(id).checked = false;

                var result = document.getElementById(id).checked;

            }

        }

    }

    function GB(id) {//更改状态

        var result = document.getElementById(id).checked;

        document.getElementById("ca").checked = true;

        if (result == true) {

            var c = document.getElementsByName("cb");

            var ad = c.length;

            for (var i = 0; i < ad; i++) {

                var idre = "cb" + i;

                var result1 = document.getElementById(idre).checked;

                if (document.getElementById(idre).checked == false) {

                    document.getElementById("ca").checked =false;

                    return;

                }

            }

        } else {

            alert(document.getElementById(id).checked);

            document.getElementById("ca").checked = false;

            return;

        }

    }

    function Test() {//获取value值

        var result = document.getElementsByName("cb");

        var int = result.length;

        var arr = "";

        for (var i = 0; i < int; i++)

        {

            var id="cb"+i;

            if (document.getElementById(id)) {

                arr += "'"+document.getElementById(id).value+"'"+",";

            }

        }

        alert(arr);

    }

</script>

这个才能更加适合我们的需要！

技术不重要，也不高深，但是想法，思路很重要！

html table之全选，全不选的更多相关文章

全选全不选案例table表格
全选全不选案例table表格案例一纯table表格 <table class="table table-bordered"> <thead class=&quo ...
Jquery 遍历 Table；遍历CheckBox ；遍历Select；全选/全不选
关于Jquery:相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件:权当总结下: 遍历Table <table id="thistab"> < ...
Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表动态参数、参数多选全选、动态列、动态显示行字体颜色
上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...
jQuery/javascript实现全选全不选
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
jQuery实现Checkbox中项目开发全选全不选的使用
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
Jq 遍历全选全不选反选
//全选全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...
原生JS实现全选和不全选
案例演示源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
javascript实现复选框的全选全不选
通过复选框的id获取到复选框元素对复选框绑定点击事件每个checkbox都设置相同的name checkOne 通过得到的元素获取checkbox的状态当点击全选全不选checkbox时,检查 ...
VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
在jquery中，全选/全不选的表示方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

JS match() 方法使用
javascript中的match函数是使用正则表达式对字符串进行查找,并将查找的结果作为数组返回,在实际开发中非常的有用,使用方法如下: stringObj.match(rgExp) 其中strin ...
ios创建二维码
#import "LCTwoCodeImage.h" @implementation LCTwoCodeImage +(UIImage *) GotoCreatMyTwoCode ...
[Android] adb 命令 dumpsys activity , 用来看 task 中的activity。 (uninstall virus)
用“adb shell dumpsys activity”命令再来查看一下系统运行的的任务,就会看到: ACTIVITY MANAGER ACTIVITIES (dumpsys activity ac ...
GTID复制之二
在线启用GTID,这样就不会对生产造成影响. 1.在每个Server上,执行 SET @@GLOBAL.ENFORCE_GTID_CONSISTENCY=WARN;确保在ErrorLog中没有WARN ...
Linux系统下设置Tomcat自启动
需要将tomcat加入自启动队列中,则需要进行如下的操作: 以root用户登录系统: cd /etc/rc.d/init.d/ vi tomcat 文件内容参考如下: #!/bin/sh # # to ...
Android -- View setScale, setTranslation 对View矩阵的处理
参考: 1.Android Matrix理论与应用详解 2.2D平面中关于矩阵(Matrix)跟图形变换的讲解 3.Android中关于矩阵(Matrix)前乘后乘的一些认识 4.Android Ma ...
C#学习笔记----C#中的闭包机制
http://www.cnblogs.com/jiejie_peng/p/3701070.html http://www.cnblogs.com/Ribbon/p/3611457.html “ 若匿名 ...
jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1 首先引用下面的文件  <script type="text/javascript" s ...
MyEclipse2014配置Tomcat开发JavaWeb程序JSP以及Servlet（转载）
转载地址:http://blog.csdn.net/21aspnet/article/details/21867241 1.安装准备 1).下载安装MyEclipse2014,这已经是最新版本. 2) ...
Delphi的枚举类型
参考:http://blog.csdn.net/kissdeath/article/details/2060573 Delphi程序不仅可以用于数值处理,还更广泛的用于处理非数值的数据.例如:性别.月 ...

html table之 全选，全不选

html table之 全选，全不选的更多相关文章

随机推荐

热门专题

html table之全选，全不选

html table之全选，全不选的更多相关文章