<!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>