オリジナルjs、ラジオボックスを実現
9442 ワード
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