原生js,实现单选框 

<!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() {

                //第一种方法
                // for (var i = 0; i < list.length; i++) {
                //     list[i].classList.remove("checked"); //清楚所有颜色
                // }
                // this.classList.add("checked"); //点击哪个添加哪个颜色

                //第二种方法
                // var checkedOption = document.querySelector(".options .checked"); //获取选中的checked类
                // checkedOption.classList.remove("checked"); //清除所有类
                // this.classList.add("checked"); //this添加类

                //第三种方法
                for (var i = 0; i < list.length; i++) {
                    if (this == list[i]) { //this 是当前操作的option,如果list[i]和this相等，说明list[i]就是我们当前操作的这一项
                        this.classList.add("checked");
                    } else {
                        list[i].classList.remove("checked");
                    }
                }

            }

        }
    </script>
</body>

</html>

 

posted @ 2019-08-15 22:27  quitpoison  阅读(8425)  评论(0)  编辑  收藏  举报