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

随机推荐

利用ssh-copy-id无需密码登录远程服务器
本地机器生成公钥和私钥 ssh-keygen -t rsa 一路回车,最后会在~/.ssh目录下生成id_rsa和id_rsa.pub这两个文件. 与远程服务器建立信任机制 ssh-copy-id - ...
centos6.5 iptables结合ipset批量屏蔽ip
安装ipset yum install ipset #创建ip地址集合 ipset create bansms hash:net 查找访问了“getVerificationCode”并且次数大于10次 ...
12. javacript高级程序设计-DOM2和DOM3
1. DOM2和DOM3 DOM2级规范定义了一些模块,用于增强DOM1级.“DOM2级核心”为不同的DOM类型引入了一些与XML命名空间有关的方法,这些变化只在使用XML或者XHTML,对于HTML ...
Java for LintCode 验证二叉查找树
给定一个二叉树,判断它是否是合法的二叉查找树(BST) 一棵BST定义为: 节点的左子树中的值要严格小于该节点的值. 节点的右子树中的值要严格大于该节点的值. 左右子树也必须是二叉查找树. ...
Django~static files
such as images, JavaScript, or CSS https://docs.djangoproject.com/en/1.9/howto/static-files/ django. ...
SAP 工厂日生产计划待排维护
*&---------------------------------------------------------------------* *& Report ZPPR0024 ...
2.kvm创建第一个虚拟机
1.创建一个镜像 [root@kvm ~]# qemu-img create -f raw /opt/Centos_6.6_x86.raw 5G Formatting '/opt/Centos_6.6 ...
Python: 安装BeautifulSoup4
python3.4.3 安装BeautifulSoup4: 使用pip install 安装: 在命令行cmd之后输入,pip install BeautifulSoup4 BeautifulSoup ...
js正则表达式替换空格
str.replace(/^\s+|\s+$/g, '') 解析: str:要替换的字符串 \s : 表示 space ,空格+: 一个或多个^: 开始,^\s,以空格开始$: 结束,\s$,以空 ...
【leetcode】 Letter Combinations of a Phone Number(middle)
Given a digit string, return all possible letter combinations that the number could represent. A map ...

html table之 全选，全不选

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

随机推荐

热门专题

html table之全选，全不选

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