原生js开发简单复选框，点击变颜色，再点击取消颜色，三种解决方法 

 

 本文主要重点

classList 有4个方法
// add("class名字"); 给元素中添加一个class,例如 add("checked")
// remove("class名字"); 删除class
// contains("class名字") ;判断元素的classList是否包含这个class，包含返回true,否则返回false     
// toggle() 切换class,如果元素有这个class,我们就删掉，否则就加上class
效果图：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复选框</title>
    <style>
        .options>a {
            color: #333;
            margin: 20px;
        }
        
        .checked {
            color: red!important;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="options">
            <a href="javascript:;" class="checked">语文</a>
            <a href="javascript:;">数学</a>
            <a href="javascript:;">英语</a>
        </div>
    </div>
    <script>
        //目标是：复选框效果，样式比较简单，点击字体变颜色即可
        var list = document.querySelectorAll(".options a"); //先获取所有标签
        console.log(list); //类数组
        // list.onclick = function() { //一组元素不能直接操作，只能通过下标操作，哪怕这组元素只有一个

        // }
        for (var i = 0; i < list.length; i++) {

            list[i].onclick = function() {

                //第一种方法，判断有没有这个类名，但是如果是多个类名尼
                // if (this.className == 'checked') { //如果包含这个class,点击就去掉class
                //     this.className = '';
                // } else { //否则取消
                //     this.className = 'checked';
                // }

                //第二种方法：classList
                //console.log(this.classList);
                //classList  有4个方法
                // add("class名字");   给元素中添加一个class,例如  add("checked")             
                // remove("class名字");  删除class            
                // contains("class名字") ;判断元素的classList是否包含这个class，包含返回true,否则返回false                    
                // toggle()   切换class,如果元素有这个class,我们就删掉，否则就加上class


                // if (this.classList.contains("checked")) { //如果classList包含这个class,点击就删掉class，否则添加class
                //     this.classList.remove("checked");
                // } else { //否则取消
                //     this.classList.add("checked");
                // }

                // 第三种方法  toggle
                this.classList.toggle('checked');

            }
        }
    </script>
</body>

</html>

 

posted @ 2019-08-15 21:40  quitpoison  阅读(2274)  评论(0)  编辑  收藏  举报