javascript - 红绿灯样式形式

Question

我正在创建一个易于使用的表单 web 应用程序，它使用按钮来生成答案。

我希望这些框显示一种颜色或显示一个数字，如果可能的话两者都显示，然后一旦按下它就只显示数字或使其他框变暗，这样你就可以清楚地看到你已经按下了框 3。我希望这最终记录按下了什么按钮，然后添加到表单中。

知道如何创建这样的按钮吗？

Answer 1

给所有按钮一个类，然后是这样的：

$('.btnClass').click(function() {
  $('.btnClass').css('opacity', 0.5);
  $(this).css ('opacity', 1);
  });

这将使未选择的按钮变暗。

Answer 2

你可以通过使用单选按钮的标签来实现这一点， http://www.w3schools.com/tags/tag_label.asp

您隐藏实际的单选按钮并将标签设置为交通灯之类的样式，因此当您单击标签时，它会自动检查单选按钮。

使用一些 javascript/css 和 helperclasses，您可以轻松实现您想要的效果（例如，混合其他标签等）