- <!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";
- }
- }
- </script>
来源: http://www.bubuko.com/infodetail-2608818.html