切换布尔输入按钮

Question

我有一个简单的表单，想要将对象的布尔属性的值设置为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.

我该怎么做？

Answer 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/。如果您有其他想法，请告诉我。