就是这个小功能让我和组长引发争端,就是这个小功能让我差点“被”辞职,就是这个自封装的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之 全选,全不选的更多相关文章

  1. 全选全不选案例table表格

    全选全不选案例table表格 案例一纯table表格 <table class="table table-bordered"> <thead class=&quo ...

  2. Jquery 遍历 Table;遍历CheckBox ;遍历Select;全选/全不选

    关于Jquery:相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件:权当总结下: 遍历Table <table  id="thistab"> < ...

  3. Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  4. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  5. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  6. Jq 遍历 全选 全不选 反选

    //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...

  7. 原生JS实现全选和不全选

    案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  8. javascript实现复选框的全选全不选

    通过复选框的id获取到复选框 元素 对复选框绑定点击事件 每个checkbox都设置相同的name checkOne 通过得到的元素获取checkbox的状态 当点击全选全不选checkbox时,检查 ...

  9. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. 在jquery中,全选/全不选的表示方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Linux/Unix命令

    MAC 中自定义环境变量 打开:nano .bash_profile 查看:cat text 保存退出:Ctrl+C,Y #在.bash_profile 中添加tree alias tree=&quo ...

  2. code vs1517 求一次函数解析式(数论 纯数学知识)

    1517 求一次函数解析式  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解  查看运行结果     题目描述 Description 相信大家都做过练 ...

  3. CSS3实现圆角效果

    利用border-radius属性可以给元素div,input元素等添加圆角效果 后跟 值为这个圆角的半径,即数值越大效果越明显 -webkit-border-top/bottom-left/righ ...

  4. 【文件】读取一个文件夹下所有的jpg图片

    今天做视频处理的时候,发现给的视频是用jpg图片的形式给出的,名字的命名规律性不是很强.就想找一种通用的遍历文件夹下图片的方法. 开始在网上找到了下面这份代码,发现只能读取所有的文件夹,文件都被跳过了 ...

  5. WEB前端开发学习:源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  6. 模拟赛1029d2

    [问题描述]祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到轨道上并加入原有序列中.一旦有三个或更多同色的珠子变 ...

  7. oracle学习不错的网站

    http://oracle-base.com/articles/linux/rlwrap.php

  8. debug与release

    因为在Debug中有ASSERT断言保护,所以要崩溃,而在Release优化中就会删掉ASSERT,所以会出现正常运行. void func() {    char b[2]={0};    strc ...

  9. Mac OS

    defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com.apple.finde ...

  10. 查看局域网内在线的主机ip和mac地址

    ]# nmap -sP Starting Nmap 5.51 ( http://nmap.org ) at 2016-12-12 22:43 CST Nmap scan report for 192. ...