闭包方式实现全选

最新推荐文章于 2022-04-16 16:24:57 发布

ld513508088

最新推荐文章于 2022-04-16 16:24:57 发布

阅读量651

点赞数

分类专栏： javaScript 文章标签： function input

本文链接：https://blog.csdn.net/ld513508088/article/details/8004861

版权

javaScript 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript">
window.οnlοad=function(){
var oBn=document.getElementById('selectAll');
var oIt=document.getElementsByTagName('input');
var ooBn=document.getElementById('deSelectAll');
oBn.οnclick=function(){
if(oBn.checked==true){
for(var i=1;i<oIt.length;i++){
oIt[i].checked=true;
}
}
if(oBn.checked==false){
for(var i=1;i<oIt.length;i++){
oIt[i].checked=false;
}
}
};
for(var i=1; i<oIt.length;i++){
(function(i){
oIt[i].οnclick=function(){ //用闭包保证点击某checkbox的时候，i值对应其自身。
/*if(!oIt[i].checked){ //这个思路很好，这种情况包含在下边
oBn.checked=false;
return;
}*/
var bool=true;
for(var j=1;j<oIt.length;j++){
bool=bool&&oIt[j].checked;
}
if(bool){
oBn.checked=true;
}else{
oBn.checked=false;
}
};
})(i);
}
};
</script>
</head>
<body>
<input type="checkbox" id="selectAll"/>全选<br>
<input type="checkbox"/>aa<br>
<input type="checkbox"/>bb<br>
<input type="checkbox"/>cc<br>
</body>
</html>