forms - JSFiddle：将 div 变成单选按钮

Question

http://jsfiddle.net/3ypYW/

<a href=""><div class="service1"><p>Option 1</p></div></a>

我创建了一个带有悬停功能的简单 div，我想将其转换为单选按钮以成为表单的一部分。我精通表单和 div 以及 CSS 和 JQuery，但我不知道如果可能的话，我如何将它们捆绑在一起以创建一个单选按钮，该单选按钮在被选中时显然会保持绿色。

谢谢！

Answer 1

试试这个：在你的 CSS 中为选中的样式添加一个类，它可能与悬停相同。

.service1:hover, .checked { background:#66ff99; color:#000; }

向您的链接添加 js 调用，不要忘记“#”以留在页面上：

<a href="#" onclick="check(this)">...

最后定义将 .checked 类添加到 div 的 js 函数：

<script type="text/javascript">
function check(element) {
    d = element.firstChild;
    d.className = d.className + " checked";
}
</script>