妙味课堂基础篇0_2代码
1、全选框
全选 选中 选中 选中 选中 选中 选中 选中 选中 选中 选中
<!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>
2、选项卡
div1
div2
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>
