批量修改样式及全选反选
Posted 所爱隔山隔海
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了批量修改样式及全选反选相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0 auto;
padding: 0;
}
.btn{
width: 200px;
height: 60px;
background-color: #002752;
color:white;
text-align: center;
line-height:60px;
border-radius: 5px;
}
.list{
width:400px;
height: 200px;
border: 1px solid #002752;
margin-top: 20px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<div class="btn">批量修改样式</div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="btn"bs="1">全选</div>
<div class="btn"bs="2">反选</div>
<div class="btn"bs="3">不选</div>
<input type="checkbox" name="" id="" value="" />租房
<input type="checkbox" name="" id="" value="" />买房
<input type="checkbox" name="" id="" value="" />卖房
<input type="checkbox" name="" id="" value="" />中介
<input type="checkbox" name="" id="" value="" />商家
</body>
</html>
<script type="text/javascript">
var btnlist =document.getElementsByClassName("btn");
for(var i=1;i<btnlist.length;i++){
btnlist[i].onclick=function () {
//this关键词
//this 跟点击，移入，移出事件在一起用；
//console.log(this);
// var ipt =document.getElementsByTagName("input");
var ipt=document.querySelectorAll("input[type=checkbox]");
switch(this.getAttribute("bs")){
case "1":
for(var i=0;i<ipt.length;i++){
ipt[i].checked=true;
}
break;
case "2":
for(var i=0;i<ipt.length;i++){
ipt[i].checked=ipt[i].checked?false:true;
}
break;
default:
var num=0;
while (num<ipt.length){
ipt[num].checked=false;
num++;
}
break;
}
}
}
//1.找到需要挂事件的元素
var btn = document.getElementsByClassName("btn")[0];
//2.挂事件
btn.onclick = function(){
//3找到要修改的元素
var list = document.getElementsByClassName("list");
//4 循环元素，给每一个改变class名字
for(var i=0;i<list.length;i++){
list[i].style.width="300px";
list[i].style.height="300px";
list[i].style.backgroundColor="#003B4D";
}
}
以上是关于批量修改样式及全选反选的主要内容，如果未能解决你的问题，请参考以下文章