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

当前位置:

首页 > temp > JavaScript教程 >

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

一、批量选择

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

35.1

二、标签内获取方式

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

35.2

三、源码：

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

出处：https://www.cnblogs.com/ruigege0000/p/13742669.html

栏目列表