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