javaScript 复选框全选|单选|反选

最新推荐文章于 2024-03-24 00:16:48 发布

gaohongijj

最新推荐文章于 2024-03-24 00:16:48 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/gaohongijj/article/details/8302708

版权

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选|单选|反选</title>
</head>
<script>
//勾选全选框时，检查每一子项，与全选框状态不相同，则改变子项的状态
function chkAll(sonName,chkAllId){
var arrSon=document.getElementsByName(sonName);
var chkAll=document.getElementById(chkAllId);
var state=chkAll.checked;
for(var i=0;i<arrSon.length;i++){
if(arrSon[i].checked!=state){
arrSon[i].click();
}
}
}
//单选，检查单选的每一项是否都选中，若都选中，
function chkSon(sonName,chkAllId){
var arrSon=document.getElementsByName(sonName);
var chkAll=document.getElementById(chkAllId);
for(var i=0;i<arrSon.length;i++){
if(!arrSon[i].checked){
chkAll.checked=false;
return;
}
}
chkAll.checked=true;
}
//反选，让所有的子项都变成相反的状态
function chkOpp(sonName){
var arrSon=document.getElementsByName(sonName);
for(var i=0;i<arrSon.length;i++){
arrSon[i].click();
}
}
</script>


<body>
<table>
<tr><td><input type="checkbox"  id="chkAll" οnclick="chkAll('chkSon','chkAll');" /> 全选       部门</td></tr>
<tr><td><input type="checkbox" name="chkSon" οnclick="chkSon('chkSon','chkAll';)" />1        部门1</td></tr>
<tr><td><input type="checkbox" name="chkSon" οnclick="chkSon('chkSon','chkAll';)" />2        部门2</td></tr>
<tr><td><input type="checkbox" name="chkSon" οnclick="chkSon('chkSon','chkAll';)" />3        部门3</td></tr>
<tr><td><input type="checkbox"  οnclick="chkOpp('chkSon')" />反选</td></tr>
</table>
</body>
</html>