交通灯样式形式

Question

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

我希望这些方框能够显示颜色或显示数字，如果可能的话，一旦按下它然后只显示数字或调暗其他方框，这样你就可以清楚地看到你按下了方框3。我希望这最终能够记录按下的按钮，然后添加到表单中。

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

Answer 1

给所有按钮一个类，然后给出类似的东西：

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

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

Answer 2

你可以使用radiobutton的标签来实现这个目标， http://www.w3schools.com/tags/tag_label.asp

你隐藏了实际的无线电按钮并将标签设置为交通信号灯等等， 因此，当您单击标签时，它将自动检查单选按钮。

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