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/ ...

随机推荐

ansible中tag的用法
Tags 根据官方文档介绍: ansible允许通过自定义的关键字来给playbook中的资源打上标签,然后只运行标签标记的那个task任务. 例如,可能有个完成的OS配置,然后特定的步骤标记为“nt ...
对于Tomcat服务器环境变量和启动配置的一点补充
我们之前第一次使用Tomcat服务器运行jsp应用时,曾经给Tomcat配置过一个环境变量CATALINA_HOME,这个变量指定了Tomcat的安装位置,对于多个开发项目,我们一般会释放多个tomc ...
[Android] RelativeLayout, LinearLayout,FrameLayout
Android RelativeLayout 属性 // 相对于给定ID控件 android:layout_above 将该控件的底部置于给定ID的控件之上; android:layout_below ...
Aix下如何运行Java程序
windows下:java -classpath %classpath%;bb.jar;aa.jar [main class]main class是打包的主类,已经指定了主类,可以不输入.另外,IBM ...
SEH-关于捕获memcpy的异常
网上有说memcpy是C语言写的,没有异常处理机制. 但是貌似SEH可以处理. SEH("Structured Exception Handling"),即结构化异常处理·是(wi ...
python基础——错误处理
python基础——错误处理在程序运行的过程中,如果发生了错误,可以事先约定返回一个错误代码,这样,就可以知道是否有错,以及出错的原因.在操作系统提供的调用中,返回错误码非常常见.比如打开文件的函数 ...
MetaWeblog博客客户端工具之Windows Live Writer
吐槽&注意的坑: 刚听说了有这么一个东西,据说Windows Live Writer开源之后就改名为Open Live Writer,我以为Open Live Writer就要比Windows ...
monkey测试
一.理解monkey测试 1.Monkey测试是Android自动化测试的一种手段.Monkey测试本身非常简单,就是模拟用户的按键输入,触摸屏输入,手势输入等,看设备多长时间会出异常. 2.当Mon ...
Linux下多窗口分屏式终端--Terminator
很不错的分屏插件终端:https://pkgs.org/centos-6/repoforge-i386/terminator-0.95-3.el6.rf.noarch.rpm.html
js自定义延迟执行函数
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

html table之 全选，全不选

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

随机推荐

热门专题

html table之全选，全不选

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