javascript - 如何创建 3 个位置的切换？

Question

我想在 Web 表单上创建一个 3 个位置(或更多)的开关来替换单选按钮。像这样:

选中的值应与未选中的值颜色不同，并且只能选择一个值。你会怎么做？您将如何从表单中获取选定的值？

Answer 1

评论中提供的链接解释了这一切，基本上它与 :checked + label 和 input 的绝对位置一起工作。

/* styling*/
.optionlabel {
  display:table;
  border-collapse:collapse;
  border:1px solid lightblue;
}
.optionlabel [type="radio"] {
  position:absolute;
  left:-9999px
}
.optionlabel label {
  display:table-cell;
  width:100px;
  height:50px;
  border-left:inherit;
  text-align:center;
  vertical-align:middle;
}
/* your magic ? */
:checked + label {background:#7ED321;}

<p class="optionlabel">
<input id="option1" type="radio" name="option"/><label for="option1">Option 1</label>
<input id="option2" type="radio" name="option"/><label for="option2">Option 2</label>
<input id="option3" type="radio" name="option"/><label for="option3">Option 3</label>
</p>

(下次如果您提供 html/bootstrapped，我们将使用它来演示)