妙味课堂基础篇0_2代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task-04</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
<input id="btn" type="checkbox" name="">全选
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<input type="checkbox" name="">选中
<script type="text/javascript">
    var input = document.getElementsByTagName("input");
    var btn = document.getElementById("btn");

    btn.onclick = function() {
        console.log("i running");
        console.log(btn.checked);
            if(btn.checked)
                for (var i = 1; i < input.length; i++) {
                    input[i].checked=true;
                }

            if(!btn.checked)
                for (var i = 1; i < input.length; i++) {
                    input[i].checked=false;
                }

    }
</script>
</body>
</html>

div3

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>test</title>
 6     <style type="text/css">
 7         .active{
 8             background-color: #ccc;
 9         }
10         div{
11             display: none;
12         }
13     </style>
14 </head>
15 <body>
16     <button>按钮1</button>
17     <button>按钮2</button>
18     <button>按钮3</button>
19     <div><p>div1</p></div>
20     <div><p>div2</p></div>
21     <div><p>div3</p></div>
22     <script type="text/javascript">
23         var btn = document.getElementsByTagName("button");
24         var div = document.getElementsByTagName("div");
25         for (var i = 0; i < btn.length; i++) {
26             btn[i].index = i;
27             btn[i].onclick = function(){
28                 for (var i = 0; i < btn.length; i++) {
29                     btn[i].className="";
30                     div[i].style.display="";
31                 }
32                 
33                 this.className = "active";
34                 div[this.index].style.display="block";
35             }
36         }
37     </script>
38 </body>
39 </html>

阿木木Superstar

我们的征途是星辰大海！