如何将Bootstrap中的按钮组转换为表单的单选形式输入? [英] How do I turn a button group in Bootstrap into a radio-style input to my form?

问题描述

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

I have the following HTML that creates a radio button group using 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中做到这一点?

Based on user selection, I want to send the variable in the form from the radio group named "rating" with the value assigned to whatever the selected button's value is. How would I do this in jQuery?

推荐答案

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

用简单的英语将所选内容读为:

In plain English that selection reads as:

• 给我价值
• button元素
• 通过值为 rating (组)的name属性过滤
• 和CSS类active(表明已被选中)

• give me the value of
• button elements
• filter by the name attribute that has a value of rating (the group)
• and the CSS class active (indicating it was selected)

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

要捕获来自按钮的输入，您将需要使用自定义脚本处理程序. 如果您的目标是实际使用表单提交此文件，那么我实际上建议您反对.主要是因为这不是用户期望的形式.只需使用常规的单选按钮输入即可.

To capture the input from the button you will need to use custom script handlers. If your goal is to actually submit this with the form, I would actually suggest against it. Mostly because this is not what a user is expecting in a form. Just use a regular radio button input.

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

However if you do want to use this, you can do the following:

$('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/

Here's an example with a regular input vs. the button and why you shouldn't use the button in a form: http://jsfiddle.net/TxgVe/1/

这篇关于如何将Bootstrap中的按钮组转换为表单的单选形式输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！