原生js实现全选全部选

最新推荐文章于 2022-08-28 20:54:31 发布

全栈工程师继续努力

最新推荐文章于 2022-08-28 20:54:31 发布

阅读量2.9k

点赞数

分类专栏： js jquery 文章标签： js原生实现全选全部选 js实现全选和反选 js 实现全选全不选 checkbox

本文链接：https://blog.csdn.net/qq_16664643/article/details/52347444

版权

js 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

jquery

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="btn1" value="selectAll"/>
<input type="button" id="btn2" value="noSelect"/>
<input type="button" id="btn3" value="UnSelect"/>
<p></p>
<div id="input1">
<input type="checkbox" /><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
</div>
<script>
window.οnlοad=function(){
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
var div1=document.getElementById("input1");
var inputChebox=div1.getElementsByTagName("input");
btn1.οnclick= function () {
for(var i=0;i<inputChebox.length;i++){
inputChebox[i].checked=true;
}
};
btn2.οnclick= function () {
for(var i=0;i<inputChebox.length;i++){
inputChebox[i].checked=false;
}
};
btn3.οnclick= function () {
for(var i=0;i<inputChebox.length;i++){
if(inputChebox.checked==true){
inputChebox[i].checked=false;
}else{
inputChebox[i].checked=true;
}
}
}
}
</script>
</body>
</html>