布尔输入的切换按钮答案

【问题标题】：Toggle button for boolean input布尔输入的切换按钮
【发布时间】：2015-10-02 04:34:26
【问题描述】：

我有一个简单的表单，想将对象的布尔属性的值设置为 true 或 false。我想在两个按钮之间切换。如果我点击按钮 A：

 1. the boolean attribute gets value true
 2. button A hides and button B shows.

如果我现在点击按钮 b：

 1. the boolean attribute gets value false
 2. button B hides and button A shows.

我该怎么做？

【问题讨论】：

有什么理由不使用复选框？
嗯，好点..我过于复杂了。相反，我将如何设置复选框的样式并用切换按钮替换它们？

标签： javascript jquery ruby-on-rails ruby-on-rails-4 simple-form

【解决方案1】：

您可以轻松地使用 font-awesome 之类的库来切换一些直观的图标：

<input type="checkbox" id="control" /><label for="control">Toggle</label>

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label:before {
    display: inline-block;
    font-family: FontAwesome;
    content: "\f00d";
    color: red;
}

input[type="checkbox"]:checked + label:before {
    content: "\f00c";
    color:green;
}

这是一个小提琴：https://jsfiddle.net/5o57rc30/。如果您有其他想法，请告诉我。

【讨论】：