JavaScript连载35-全选反选等功能实现、标签内容获取

  • A+
所属分类：Web前端
便宜好用的国外VPS推荐

一、批量选择

  • 实现全选、取消全选和反选的功能
  • 步骤在于先获取每个按钮的事件，然后绑定按钮的具体逻辑
  • 重点在于设置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{             width: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>

JavaScript连载35-全选反选等功能实现、标签内容获取

二、标签内获取方式

  • 获取内容.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>

JavaScript连载35-全选反选等功能实现、标签内容获取

三、源码：

  • 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
  • 欢迎关注微信
便宜好用的国外VPS推荐