一、批量选择
- 实现全选、取消全选和反选的功能
- 步骤在于先获取每个按钮的事件，然后绑定按钮的具体逻辑
- 重点在于设置checked属性实现选择
- 复习了querySelectAll()用来获取所有某一个id的标签
- 复习了box-shadow用于指定盒子的阴影的功能
- 复习了addEventListener()用于绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D35_1_PatchSelect</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#panel{
400px;
box-shadow:0 0 10px #000;/*这个属性是用来给盒子添加阴影的*/
margin:100px auto;
padding:20px;
}
.panel-header{
text-align:center;
margin-bottom:10px;
}
.panel-footer{
text-align: center;
margin-top:10px;
}
</style>
</head>
<body>
<div id="panel">
<section class="panel-header">
<h2>歌曲排行榜</h2>
<hr>
</section>
<section class="panel-content">
<label><input type="checkbox"></label>1.时间都去哪了儿了<br>
<label><input type="checkbox"></label>2.海阔天空<br>
<label><input type="checkbox"></label>3.真的爱你<br>
<label><input type="checkbox"></label>4.不再犹豫<br>
<label><input type="checkbox"></label>5.光辉岁月<br>
<label><input type="checkbox"></label>6.喜欢你<br>
<label><input type="checkbox"></label>7.偏偏喜欢你<br>
<label><input type="checkbox"></label>8.老街<br>
</section>
<section class="panel-footer">
<hr>
<button id="allSelect">全选</button>
<button id="cancelSelect">取消选中</button>
<button id="reverseSelect">反选</button>
</section>
</div>
<script>
window.onload = function (ev) {
//1.获取所有的复选框
var inputs = document.querySelectorAll('input');
//2.全选的事件
console.log($('allSelect'));//打印出来可以看出是一个我们想要的全选的哪个button
$('allSelect').addEventListener('click',function (ev2) {
for(var i=0;i<inputs.length;i++){
var input = inputs[i];
input.checked = true;//可以看到这种改变标签的属性，直接使用点就行了，CSS的属性需要添加一个.style
}
});
//3.取消选中，逻辑就和上面的的类似
$('cancelSelect').addEventListener('click',function (ev3) {
for(var j=0;j<inputs.length;j++){
var input = inputs[j];
input.checked = false;//可以看到这种改变标签的属性，直接使用点就行了，CSS的属性需要添加一个.style
}
});
//4.反选
$('reverseSelect').addEventListener('click',function (ev3) {
for(var j=0;j<inputs.length;j++){
var input = inputs[j];
if(input.checked === false){
input.checked = true;
}else{
input.checked = false;
}
}
})
function $(id) {
return typeof id === 'string'?document.getElementById(id):null;
}
}
</script>
</body>
</html>
二、标签内获取方式
- 获取内容.value .innerText .innerHTML的区别讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D35_2_MethodOfLableContent</title>
</head>
<body>
<div id="box">
sdfjsd
<input type="text">
<textarea cols="30" rows="10"></textarea><!--复习了可以变化大小的输入框，里面的属性是默认没拖拉的时候-->
<div>今天天气很好</div>
</div>
<script>
window.onload = function (ev) {
var input = document.getElementsByTagName("input")[0];
//下面两行都是修改值的方式，第二个多用于框架类
input.value = "改变值";
// input.setAttribute(value,"好吧");
console.log(input.value);//value就是它的值“今天天气很好”
var box = document.getElementById("box");
console.log(box.innerText);//可以和上面做对比，对于div这种他们的值在尖括号之间，那么我们取值的时候要使用innerText
console.log(box.innerHTML);//连带的是标签
}
</script>
</body>
</html>
三、源码：
- D35_1_PatchSelect.html
- D35_2_MethodOfLableContent.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D35_1_PatchSelect.html
https://github.com/ruigege66/JavaScript/blob/master/D35_2_MethodOfLableContent.html- 博客园：
https://www.cnblogs.com/ruigege0000/
- CSDN：
https://blog.csdn.net/weixin_44630050?t=1
- 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
