checkbox全选反选行变色 javascript_用js判断checkbox全选并将全选后的行变色-优快云博客

本文介绍了如何使用JavaScript实现表格中checkbox的全选、反选功能，并在选中状态改变时动态改变相应行的背景颜色，提升用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>noname</title>
<style>
*{margin:0px;}
ul{height:20px;border:#E8E8E8 1px solid;}
li{float:left;}
</style>
</head>
<script language="javascript">
function ChangeColor(o){
o.parentNode.parentNode.style.background=o.checked?"#eee":"#fff"
}
function setChecked(oA)
{
for (var i=0;i<oA.length;i++){oA[i].checked = !oA[i].checked;ChangeColor(oA[i]);};
}
</script>
<form name="selform">
<ul>
<li style="width:4%;"><input type="checkbox" class="checkbox" name="ID" value="41" onclick="ChangeColor(this)"></li>
<li>aaaaa</li>
</ul>
<ul>
<li style="width:4%;"><input type="checkbox" class="checkbox" name="ID" value="41" onclick="ChangeColor(this)"></li>
<li>bbbbb</li>
</ul>
<ul>
<li style="width:4%;"><input type="checkbox" class="checkbox" name="ID" value="41" onclick="ChangeColor(this)"></li>
<li>ccccc</li>
</ul>
</form>
<div>
<li><input type="button" name="chksel" value="全选|反选" onClick="setChecked(document.getElementsByName('ID'))"></li>

</div>

表示一个元素的父元素
document节点没有父元素
例如：
<div><span>dfd</span><div>
document.getElementsByTagName('span')[0].parsentNode;//表示选中DIV