html单选框不用radio的代码

如果你使用过HTML单选框，那么你一定知道radio。但是，在某些情况下，可能需要使用一些不同的方式来实现HTML单选框，比如下面介绍的一些方式。

<label for="option1">
  <input type="checkBox" id="option1" name="options" value="option1">
  <span>选项1</span>
</label>

<label for="option2">
  <input type="checkBox" id="option2" name="options" value="option2">
  <span>选项2</span>
</label>

<label for="option3">
  <input type="checkBox" id="option3" name="options" value="option3">
  <span>选项3</span>
</label>

上面的代码使用了标签来代替了radio。通过使用标签，我们可以为每个选项添加样式，比如颜色、大小等等。此外，我们还可以使用JavaScript代码来添加选中与未选中的样式。

另外，我们也可以使用checkBox来实现单选框。通过为每个checkBox设置相同的 name 属性，我们就可以实现只能选中一个选项的效果。

<label for="option1">
  <input type="checkBox" id="option1" name="options" value="option1">
  <span>选项1</span>
</label>

<label for="option2">
  <input type="checkBox" id="option2" name="options" value="option2">
  <span>选项2</span>
</label>

<label for="option3">
  <input type="checkBox" id="option3" name="options" value="option3">
  <span>选项3</span>
</label>

最后，我们也可以使用CSS来实现HTML单选框。通过设置input标签的visibility属性为hidden，我们可以将radio隐藏。然后，我们可以使用CSS样式来代替radio，从而实现单选框的效果。

<label for="option1">
  <input type="radio" id="option1" name="options" value="option1" style="visibility:hidden">
  <span class="radio-button"></span>
  <span class="radio-label">选项1</span>
</label>

<label for="option2">
  <input type="radio" id="option2" name="options" value="option2" style="visibility:hidden">
  <span class="radio-button"></span>
  <span class="radio-label">选项2</span>
</label>

<label for="option3">
  <input type="radio" id="option3" name="options" value="option3" style="visibility:hidden">
  <span class="radio-button"></span>
  <span class="radio-label">选项3</span>
</label>

.radio-label {
  margin-left: 10px;
}

.radio-button {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin-right: 10px;
}

input[type="radio"]:checked + .radio-button {
  background-color: #2196F3;
  border-color: #2196F3;
}

总的来说，以上是一些不同的实现HTML单选框的方式，你可以根据需要来选择使用哪种方式。