全选反选不选

最新推荐文章于 2023-03-14 16:27:51 发布

Purple_

最新推荐文章于 2023-03-14 16:27:51 发布

阅读量447

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u013081066/article/details/17200475

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全选不选反选</title>

<script>
window.οnlοad=function(){
//要完成这个操作 1.获取到button操作的这个按钮
var oBtn=document.getElementById("btn1");
var nBtn=document.getElementById("btn2");
var fBtn=document.getElementById("btn3");
//2.为了获取到所有的checkbox，要先获取到他外围的div
var oDiv1=document.getElementById("div1");
//3.接着，通过外围的div获取到所有checkbox 注意，这里不仅仅可以通过document来获取元素
var aCheck=oDiv1.getElementsByTagName("input");
//4.对其进行操作，用循环的方式
oBtn.οnclick=function(){ //这里用的是匿名函数
for(var i=0;i<aCheck.length;i++){
aCheck[i].checked=true;
}
}

nBtn.οnclick=function(){
for(var i=0;i<aCheck.length;i++){
aCheck[i].checked=false;
}
}

//这是第三个反选，很简单，就是用if语句见原来选中的变成false，没选的变为true
fBtn.οnclick=function(){
for(var i=0;i<aCheck.length;i++){
if(aCheck[i].checked==true){
aCheck[i].checked=false;
}else{
aCheck[i].checked=true;
}
}
}

};
</script>
</head>

<body>

<input type="button" id="btn1" value="全选"/>
<input type="button" id="btn2" value="不选"/>
<input type="button" id="btn3" value="反选"/>

<div id="div1">
<input type="checkbox"/>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>

</html>

这是效果

Purple_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选反选不选

全选不选反选window.onload=function(){//要完成这个操作 1.获取到button操作的这个按钮var oBtn=document.getElementById("btn1");var nBtn=document.getElementById("btn2");var fBtn=document.getElementById("btn3");
复制链接

扫一扫