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

随机推荐

Unity3D研究院之Prefab里面的Prefab关联问题（转）
转自http://www.xuanyusong.com/archives/3042 最近在做UI部分中遇到了这样的问题,就是Prefab里面预制了Prefab.可是在Unity里面一旦Prefab预制 ...
iOS 活动图流程图
活动图活动图和状态机图都被称为演化图,其区别和联系如下: 1.活动图:用于描述用例内部的活动或方法的流程,如果除去活动图中的并行活动描述以后,它就变成流程图. ...
html表单样式, table隔行高亮, 长字符串自动换行
2016年1月14日 11:16:54 星期四效果图: html: <!DOCTYPE html> <html lang="en"> <head&g ...
Qt 文件处理
1.删除目录下所有的文件 void deleteAllFiles(const QString& fileDir) { QDir dir(fileDir); if(!dir.exists()) ...
11. javacript高级程序设计-DOM扩展
1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...
SQL Server的“错误：9004”
客户的一台现场采集电脑崩溃,无法启动.用PE引导后,将MDF和LDF数据复制出来,往正常的数据库附加时,报如下错误: 处理数据库 'databasename' 的日志时出错.如果可能,请从备份还原.如 ...
Valentine's Day Round 1001.Ferries Wheel（hdu 5174）解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5174 题目意思:给出 n 个人坐的缆车值,假设有 k 个缆车,缆车值 A[i] 需要满足:A[i−1] ...
【linux】进程不要开太多，否则系统会卡死！
今天在跑一个任务,大概像下面这样 python task.py -s input/ input文件夹下有两百多个文件,比如1.txt, 2.txt等等,task.py会顺序读取并做操作. 我想,这不是 ...
October 3rd 2016 Week 41st Monday
Better to light one candle than to curse the darkness. 与其诅咒黑暗,不如燃起蜡烛. Sitting in the darkness and wa ...
September 8th 2016 Week 37th Thursday
The secret of high-impact business is early preparation. 高效商务,赢在未雨绸缪. Early and best preparation is ...

html table之 全选，全不选

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

随机推荐

热门专题

html table之全选，全不选

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