如何将Bootstrap中的按钮组转换为表单的无线电输入？

Question

我有以下HTML使用Bootstrap创建一个单选按钮组.

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn" type="button" name="rating" value="1">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="2">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="3">
    <img ...>
  </button>
  <button class="btn" type="button" name="rating" value="4">
    <img ...>
  </button>
</div>

<button class="btn" type="submit" name="submit">Submit</button>

根据用户选择,我想从名为"rating"的无线电组中发送表格中的变量,并将值分配给所选按钮的值.我将如何在jQuery中执行此操作？

Answer 1

$('button[name="rating"].active').val();

用简单的英语表示选择如下:

• 给我价值
• button 分子
• 过滤name具有评级值的属性(组)
• 和CSS类active(表明它被选中)

根据评论中的OP新问题进行编辑:

要从按钮捕获输入,您需要使用自定义脚本处理程序.如果您的目标是实际提交表单,我实际上建议不要这样做.主要是因为这不是用户期望的形式.只需使用常规的单选按钮输入.

但是,如果您确实要使用此功能,则可以执行以下操作:

$('form').submit(function() {
    var rating = $('button[name="rating"].active').val();  

    // get the rest of the values
    // submit the form
});?

这是一个常规input与示例的例子button以及为什么你不应该在表单中使用按钮:http://jsfiddle.net/TxgVe/1/