使用表单发送自定义数据

Question

我在HTML表单中有一些类似于无线电的控件，如下所示：

这些按钮中只有一个可以同时按下，但它们只是jQuery控制的<div>。

如何使用表单数据发送按下的按钮的名称？例如，type=tiny。

我假设我使用的是jQuery，但使用JavaScript做这件事有什么陷阱吗？我是否需要挂钩表单提交事件或其他什么？ 感谢。

Answer 1

您可以将单选按钮转换为按钮，这是一个快速的想法

<强> HTML：

<div class="buttons">
    <input type="radio" name="rb" id="rb1" value="1"/><label for="rb1">One</label>
    <input type="radio" name="rb" id="rb2" value="2" /><label for="rb2">Two</label>
    <input type="radio" name="rb" id="rb3"  value="3"/><label for="rb3">Three</label>
</div>

<强> CSS：

.buttons input {
    display:none;
}

.buttons input + label{
    cursor: pointer;
    width: 2em;
    padding: .3em;
    border: 1px solid black;
    color: #000;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.buttons input:checked + label{
    background-color: red;
}

.buttons input + label:hover{
  color: #222;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
}

示例：

http://jsfiddle.net/Mmsf2/