js-dom对checkbox处理
来源：互联网 发布：西安行知中学怎么分班 编辑：程序博客网 时间：2024/06/05 21:54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
.top{
background-color:#FFFF99;
color:#66CCCC;
}
.bottom{
background-color:#FFFF99;
color:#66CCCC;
}
table{
border:1px red dashed;
border-collapse:collapse;
}
td,th{
border:#999 1px solid;
}
.one{
background-color:#99CC00;
}
.two{
background-color:#CCCC00;
}
.over{
background-color:#FF9966;
}
</style>
</head>
<body onload="gehang()">
<table width="800" border="0" align="center">
<tr class="top" align="center">
<th><input type="checkbox" name="q[]" onclick="qx()" />全选</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件内容</th>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
</tr>
<tr class="bottom" align="center">
<th><input type="checkbox" name="q[]" onclick="qx()" />全选</th>
<td colspan="3">
<input type="button" id="qx" value="全选" onclick="qx()" />
<input type="button" id="qbx" value="全不选" onclick="qbx()" />
<input type="button" id="fx" value="反选" onclick="fx()" />
<input type="button" id="del" value="删除所选附件" onclick="del()" />
</td>
</tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
function gehang(){
//获取所有的tr
var trlist=document.getElementsByTagName("tr");
for(var i=1;i<trlist.length-1;i++){
//进行遍历，并且判断
if(i%2==0){
trlist[i].className="two";
}else{
trlist[i].className="one";
}
var oldcolor;
//实现当鼠标移动到改行，该行背景加深
trlist[i].onmouseover=function (){
oldcolor = this.className;
//重新设定新的颜色
this.className="over";
}
trlist[i].onmouseout=function (){
//当鼠标离开，自动还原颜色
}
var arrObj = document.getElementsByName("q[]");
function qx(){
for(var i=0;i<arrObj.length;i++){
arrObj[i].checked = true;
}
}
function qbx(){
for(var i=0;i<arrObj.length;i++){
arrObj[i].checked = false;
}
}
function fx(){
for(var i=0;i<arrObj.length;i++){
if(arrObj[i].checked==false){
arrObj[i].checked = true;
}else{
arrObj[i].checked = false;
}
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
.top{
background-color:#FFFF99;
color:#66CCCC;
}
.bottom{
background-color:#FFFF99;
color:#66CCCC;
}
table{
border:1px red dashed;
border-collapse:collapse;
}
td,th{
border:#999 1px solid;
}
.one{
background-color:#99CC00;
}
.two{
background-color:#CCCC00;
}
.over{
background-color:#FF9966;
}
</style>
</head>
<body onload="gehang()">
<table width="800" border="0" align="center">
<tr class="top" align="center">
<th><input type="checkbox" name="q[]" onclick="qx()" />全选</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件内容</th>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
</tr>
<tr class="bottom" align="center">
<th><input type="checkbox" name="q[]" onclick="qx()" />全选</th>
<td colspan="3">
<input type="button" id="qx" value="全选" onclick="qx()" />
<input type="button" id="qbx" value="全不选" onclick="qbx()" />
<input type="button" id="fx" value="反选" onclick="fx()" />
<input type="button" id="del" value="删除所选附件" onclick="del()" />
</td>
</tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
function gehang(){
//获取所有的tr
var trlist=document.getElementsByTagName("tr");
for(var i=1;i<trlist.length-1;i++){
//进行遍历，并且判断
if(i%2==0){
trlist[i].className="two";
}else{
trlist[i].className="one";
}
var oldcolor;
//实现当鼠标移动到改行，该行背景加深
trlist[i].onmouseover=function (){
oldcolor = this.className;
//重新设定新的颜色
this.className="over";
}
trlist[i].onmouseout=function (){
//当鼠标离开，自动还原颜色
this.className=oldcolor;
}
}}
var arrObj = document.getElementsByName("q[]");
function qx(){
for(var i=0;i<arrObj.length;i++){
arrObj[i].checked = true;
}
}
function qbx(){
for(var i=0;i<arrObj.length;i++){
arrObj[i].checked = false;
}
}
function fx(){
for(var i=0;i<arrObj.length;i++){
if(arrObj[i].checked==false){
arrObj[i].checked = true;
}else{
arrObj[i].checked = false;
}
}
}
</script>
- js-dom对checkbox处理
- js中checkbox处理,js获得checkbox
- js 对 dom 操作
- JS DOM处理小结
- JS对CHECKBOX的操作
- JS对CHECKBOX的操作
- JS对CHECKBOX的操作
- JS对CHECKBOX的操作
- JS对CHECKBOX的操作
- JS对CHECKBOX的操作
- JSP/JS checkbox 值处理
- js对dom的拖动
- JS对DOM的操作
- dom checkbox
- JS DOM事件处理程序
- js--DOM（事件处理）
- jsp对同名checkbox的处理
- js 获取checkBox值，以及对checkBox进行赋值
- WINCE日文系统路径中\变成人民币符号¥的问题
- 题解：统计字符串中单词数目
- Jquery 详解
- Android应用开发之软件打包与发布,生成私钥签名你的软件
- 第14周报告1
- js-dom对checkbox处理
- 在父类和子类中定义重载函数 心得
- 设计模式---代理模式（Proxy）
- 在word中无法使用输入法解决方法
- 第14周报告2
- 关于创建线程的对比
- 将应用raw里的文件copy到sd卡实现
- 第15周报告1
- 常见面试技巧！之面试前的准备！
