jquery - 如何将 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();

用简单的英语来说，选择内容如下:

• 给我值(value)
• 按钮元素
• 按值为评分(群组)的name属性进行过滤
• 和 CSS 类 active(表明已选择)

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

要捕获按钮的输入，您将需要使用自定义脚本处理程序。如果您的目标是实际通过表格提交此内容，我实际上建议您不要这样做。主要是因为这不是用户所期望的表单。只需使用常规的单选按钮输入即可。

但是，如果您确实想使用它，可以执行以下操作:

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

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

以下是常规输入与按钮的示例，以及为什么不应在表单中使用该按钮:http://jsfiddle.net/TxgVe/1/