四态复选框

Question

我可以有一个三态复选框indeterminate,但我需要旋转4个状态.那么我怎样才能看起来像四元状态复选框？我唯一的选择是创建一组图像看起来像一个带有各种图标的复选框,还是有更优雅的方式？

Answer 1

您可以使用单选按钮和一些CSS(CSS3)实现类似的效果(循环状态),无需Javascript

.cyclestate input:not(b),
.cyclestate input:not(b) + label {
  display: none;
}
.cyclestate input:checked + label {
  display: inline-block;
  width: 4em;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-appearance: button;
  -moz-appearance: button;
}

<span class="cyclestate">
  <input type="radio" name="foo" value="one" id="one" checked>
  <label for="two">one</label>
  <input type="radio" name="foo" value="two" id="two">
  <label for="three">two</label>
  <input type="radio" name="foo" value="three" id="three">
  <label for="four">three</label>
  <input type="radio" name="foo" value="four" id="four">
  <label for="one">four</label>
</span>

有了这个,您将在一个地方拥有多个状态的空间可视化表示,并在服务器端具有可读值.请注意,标签的这种使用是一种利用:标签针对与其描述的不同输入.