如何使 div html 标签像输入类型单选按钮一样工作?

Question

我正在尝试制作一个类似于单选按钮的div按钮。

它目前像复选框一样工作。如何使其像输入(类型单选(标签一样工作？

这是像复选框一样工作的代码

.gender {
display: inline-block;
line-height: 32px;
margin: 4px;
padding-left: 32px;
background: left no-repeat url('https://icons-for-free.com/iconfiles/png/512/radio+button+unchecked+24px-131987943262195581.png');
background-size: 24px;
cursor: pointer;
}
.gender.checked {
background-image: url("https://cdn2.iconfinder.com/data/icons/interface-vol-3-1/16/radio-button-on-checked--round-circle-512.png");
}

<div style="text-align: left">
<div class="gender checked" onclick="this.classList.toggle('checked')">
Unspecified
</div>
<br>
<div class="gender" onclick="this.classList.toggle('checked')">
Male
</div>
<br>
<div class="gender" onclick="this.classList.toggle('checked')">
Female
</div>
</div>

我试图让它像一个单选按钮

Answer 1

如果你可以改变一点你的html，那么你可以试试这个。

<input type="radio" name="gender" id="unspecified" />
<label for="unspecified" class="gender">
Unspecified
</label>

然后我们可以像这样设置要检查的"假"无线电：

input[type="radio"]:checked+.gender {
background-image: url("https://cdn2.iconfinder.com/data/icons/interface-vol-3-1/16/radio-button-on-checked--round-circle-512.png");
}

演示

.gender {
display: inline-block;
line-height: 32px;
margin: 4px;
padding-left: 32px;
background: left no-repeat url('https://icons-for-free.com/iconfiles/png/512/radio+button+unchecked+24px-131987943262195581.png');
background-size: 24px;
cursor: pointer;
}
.gender.checked {
background-image: url("https://cdn2.iconfinder.com/data/icons/interface-vol-3-1/16/radio-button-on-checked--round-circle-512.png");
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+.gender {
background-image: url("https://cdn2.iconfinder.com/data/icons/interface-vol-3-1/16/radio-button-on-checked--round-circle-512.png");
}

<div style="text-align: left">
<input type="radio" name="gender" id="unspecified" />
<label for="unspecified" class="gender">
Unspecified
</label>
<br>
<input type="radio" name="gender" id="Male" />
<label for="Male" class="gender">
Male
</label>
<br>
<input type="radio" name="gender" id="Female" />
<label for="Female" class="gender">
Female
</label>
</div>