JS实现全选、不选和反选

最新推荐文章于 2023-06-25 15:24:55 发布

Richard_Jason

最新推荐文章于 2023-06-25 15:24:55 发布

阅读量1.3k

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/Richard_Jason/article/details/52911906

版权

效果图：

示例代码：

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>

全选:<input type="button" id="All" value="全选" /><br />
不选:<input type="button" id="uncheck" value="不选" /><br />
反选:<input type="button" id="othercheck" value="反选" /><br />
<div id="div">
<input type="checkbox" />1<br />
<input type="checkbox" />2<br />
<input type="checkbox" />3<br />
<input type="checkbox" />4<br />
<input type="checkbox" />5<br />
<input type="checkbox" />6<br />
<input type="checkbox" />7<br />
<input type="checkbox" />8<br />
<input type="checkbox" />9<br />
<input type="checkbox" />10<br />
<input type="checkbox" />11<br />
<input type="checkbox" />12<br />
<input type="checkbox" />13<br />
<input type="checkbox" />14<br />
<input type="checkbox" />15<br />
<input type="checkbox" />16<br />
<input type="checkbox" />17<br />
<input type="checkbox" />18<br />
<input type="checkbox" />19<br />
<input type="checkbox" />20<br />
</div>

<script type="text/javascript">
window.οnlοad=function(){
var CheckAll=document.getElementById('All');
var UnCheck=document.getElementById('uncheck');
var OtherCheck=document.getElementById('othercheck');
var div=document.getElementById('div');
var CheckBox=div.getElementsByTagName('input');
CheckAll.οnclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=true;
};
};
UnCheck.οnclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=false;
};
};
othercheck.οnclick=function(){
for(i=0;i<CheckBox.length;i++){
if(CheckBox[i].checked==true){
CheckBox[i].checked=false;
}
else{
CheckBox[i].checked=true
}

};
};
};
</script>

</body>
</html>