<!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>
原文地址：https://www.cnblogs.com/quitpoison/p/11360988.html
时间： 2024-10-31 01:01:24