JavaScript連載35-全選反選等功能實現、標簽內容獲取

新進小設計 2021-09-16

展開全文

一、批量選擇

實現全選、取消全選和反選的功能
步驟在于先獲取每個按鈕的事件，然后綁定按鈕的具體邏輯
重點在于設置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的區(qū)別講解

<!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
歡迎關注微信公眾號：傅里葉變換，個人賬號，僅用于技術交流