如何创建只能选择一个选项的自定义单选按钮

Question

我使用HTML、CSS、JS创建了自定义单选按钮。

现在，它可以一次选择多个选项，如2、3或4个选项。我想做的是一次只选择一个。

而且，我想知道是否有一种方法，我可以为所有4个div添加一个::after，而不是为所有div添加多个具有相同值的::after。

let mainBtns = document.querySelectorAll('#container');

mainBtns.forEach(btn => {   
btn.addEventListener('click', () => {
btn.classList.toggle('active');
});
});

.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.first, .second, .third, .forth {
display: flex;
place-content: center;
place-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(202, 202, 202);
cursor: pointer;
position: relative;
box-shadow: 0 0 6px 1px #e8eef6;

}
.first::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
vertical-align: middle; 
visibility: hidden;  
}
.second::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute; 
visibility: hidden;
}
.third::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute; 
visibility: hidden;
}
.forth::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
visibility: hidden;
}
.active::after {
visibility: visible;
}
.deActive::after {
visibility: hidden;
}

<div class="main">
<div id="container" class="first"></div>
<div id="container" class="second"></div>
<div id="container" class="third"></div>
<div id="container" class="forth"></div>
</div>

Answer 1

HTML<input type="radio">的默认行为；已经是你想要的了。您可以直接使用CSS对它们进行样式设置。

.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.main>input {
appearance: none;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(202, 202, 202);
cursor: pointer;
box-shadow: 0 0 6px 1px #e8eef6;
}
.main>input::after {
content: '';
position: absolute;
top: 15px;
left: 15px;
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
visibility: hidden;
}
.main>input:checked::after {
visibility: visible;
}

<div class="main">
<input type="radio" id="apple" name="fruit" value="apple" checked>
<input type="radio" id="orange" name="fruit" value="orange">
<input type="radio" id="banana" name="fruit" value="banana">
</div>

Answer 2

为了避免重复：对于每个按钮，您可以使用元素>元素选择器；

为了一次选择一个选项，您需要重置按钮的类名(从所有按钮中删除活动类名(，然后将活动添加到所选的一个

const mainBtns = document.querySelectorAll(".btn");
mainBtns.forEach(btn => {
btn.addEventListener("click", () => {
if (btn.classList.contains("active")) return btn.classList.remove("active");
mainBtns.forEach(btn => (btn.className = "btn"));
btn.classList.add("active");
});
});

.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.main>div {
display: flex;
place-content: center;
place-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(202, 202, 202);
cursor: pointer;
position: relative;
box-shadow: 0 0 6px 1px #e8eef6;
}
.main>div::after {
content: "";
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
vertical-align: middle;
visibility: hidden;
}
.main>.active::after {
visibility: visible;
}

<div class="main">
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>

Answer 3

不能对多个元素使用id属性

对于您的代码

你可以像这个一样修改你的代码

HTML

<div id="custom-radio-button" class="main">
<div class="first" onclick="selectMe(this)"></div>
<div class="scond" onclick="selectMe(this)"></div>
<div class="third" onclick="selectMe(this)"></div>
<div class="forth" onclick="selectMe(this)"></div>
</div>

CSS

.first::after,
.scond::after,
.third::after,
.forth::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
vertical-align: middle;
visibility: hidden;
}

JavaScript

let mainBtns = document.getElementById("custom-radio-button").children
function selectMe(element) {
for (let index = 0; index < mainBtns.length; index++) {
if (mainBtns[index] === element) {
mainBtns[index].classList.add("active")
} else {
mainBtns[index].classList.remove("active")
}
}
}

Answer 4

html中已经存在功能，您可以使用css自定义它们。

.container {
width: 50%;
height: 300px;
text-align: center;
margin: auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.container [type="radio" i] {
transform: scale(1);
appearance: none;
width: 50px;
height: 50px;
border-radius: 50%;
border: 25px solid #999;
}
.container [type="radio" i]:checked {
border: 8px solid #999;
background-color: #000;
}

<div class="container">
<input type="radio" name="radio-group">
<input type="radio" name="radio-group">
<input type="radio" name="radio-group">
<input type="radio" name="radio-group">
</div>