js实现复选框全选改变背景颜色特效

1周前 (01-09 15:00)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5669
  • 级别管理员
  • 主题1133
  • 回复2
楼主

这是一款js全选特效代码,勾上顶部选择框后全选下面选项,选中后背景颜色隔行变色显示,可自定义背景颜色。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>全选并改变TR颜色,武鸣人欢迎您。</title>
<script language="JavaScript" type="text/javascript" for="checkbox" event="onclick">
tr_bgcolor(this);
</script>
<script language="JavaScript" type="text/javascript">
<!--
function tr_bgcolor(c){
var tr = c.parentNode.parentNode;
tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6' : '#eee' : tr.style.backgroundColor = c.checked ? '#add6d6' : '';
}
function selall(obj){
for (var i=0; i<obj.form.elements.length; i++)
if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj){
obj.form.elements[i].checked = obj.checked;
tr_bgcolor(obj.form.elements[i]);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#888888">
<tr><td><input name="selectall" type="checkbox" value="全选" onclick="selall(this)" /></td></tr>
<tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr style="background-color:#eee;">
<td width="6%"><input type="checkbox" name="checkbox" /></td><td width="94%">武鸣人一号</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>武鸣人二号</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>武鸣人三号</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>武鸣人四号</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>武鸣人五号</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>武鸣人六号</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>武鸣人七号</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>武鸣人八号</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>武鸣人九号</td></tr>
</table>
</td></tr>
</table>
</form>
</body>
</html>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/1204.html

回帖

js实现复选框全选改变背景颜色特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息