原生js,实现单选框
Posted quitpoison
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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>
以上是关于原生js,实现单选框的主要内容，如果未能解决你的问题，请参考以下文章