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

随机推荐

cocos2dx旧版本支持arm64修改
修改的版本是cocos2dx.2.2 1.在neon_matrix_impl.c中修改 #if defined(__ARM_NEON__)为 #if defined(_ARM_ARCH_7) 2.在m ...
perl的一些函数（二）
1. tr 转换转换不是替换(tr///==y///) tr/searchlist/replacementlist/用于查找某个一个字符串,并用replacementlist替换,可以使用正则表达式 ...
ffmpeg-20160515-git-bin
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒下一个帧 -> -5秒 f ...
Django~static files
such as images, JavaScript, or CSS https://docs.djangoproject.com/en/1.9/howto/static-files/ django. ...
a byte of python(摘02)
a byte of python 第四章运算符与表达式运算符运算符优先级 (运算符通常由左向右结合,即具有相同优先级的运算符按照从左向右的顺序计算.例如, 2 + 3 + 4 被计算成 (2 + ...
迷宫问题_BFS_挑战程序设计竞赛p34
给定一个N*M的迷宫,求从起点到终点的最小步数. N,M<100: 输入: 10 10#S######.#......#..#.#.##.##.#.#........##.##.####.... ...
【leetcode】Edit Distance (hard)
Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...
【XLL API 函数】xlSheetNm
从外部引用包含的工作表ID返回工作表或宏表名称,或是当前表名称. 原型 Excel12(xlSheetNm, LPXLOPER12 pxRes, 1, LPXLOPER12 pxExtref); 参数 ...
java判断身份证有效性
import java.util.Calendar; public class CertNoUtil { public static boolean vIDNumByRegex(String idNu ...
IOS- 内存管理机制
iOS平台内存常见问题作为iOS平台的开发者,是否曾经为内存问题而苦恼过?内存莫名的持续增长,程序莫名的crash,难以发现的内存泄漏,这些都是iOS平台内存相关的常见问题:本文将会详细介绍iOS ...

html table之 全选，全不选

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

随机推荐

热门专题

html table之全选，全不选

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