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/ ...
随机推荐
- Linux/Unix命令
MAC 中自定义环境变量 打开:nano .bash_profile 查看:cat text 保存退出:Ctrl+C,Y #在.bash_profile 中添加tree alias tree=&quo ...
- code vs1517 求一次函数解析式(数论 纯数学知识)
1517 求一次函数解析式 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 相信大家都做过练 ...
- CSS3实现圆角效果
利用border-radius属性可以给元素div,input元素等添加圆角效果 后跟 值为这个圆角的半径,即数值越大效果越明显 -webkit-border-top/bottom-left/righ ...
- 【文件】读取一个文件夹下所有的jpg图片
今天做视频处理的时候,发现给的视频是用jpg图片的形式给出的,名字的命名规律性不是很强.就想找一种通用的遍历文件夹下图片的方法. 开始在网上找到了下面这份代码,发现只能读取所有的文件夹,文件都被跳过了 ...
- WEB前端开发学习:源码canvas 雪
WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...
- 模拟赛1029d2
[问题描述]祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到轨道上并加入原有序列中.一旦有三个或更多同色的珠子变 ...
- oracle学习不错的网站
http://oracle-base.com/articles/linux/rlwrap.php
- debug与release
因为在Debug中有ASSERT断言保护,所以要崩溃,而在Release优化中就会删掉ASSERT,所以会出现正常运行. void func() { char b[2]={0}; strc ...
- Mac OS
defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com.apple.finde ...
- 查看局域网内在线的主机ip和mac地址
]# nmap -sP Starting Nmap 5.51 ( http://nmap.org ) at 2016-12-12 22:43 CST Nmap scan report for 192. ...