jQuery 如何将 Bootstrap 中的按钮组转换为表单的单选样式输入？

How do I turn a button group in Bootstrap into a radio-style input to my form?

提问by ArKi

I have the following HTML that creates a radio button group using Bootstrap.

我有以下 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>

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?

根据用户选择，我想从名为“rating”的单选组发送表单中的变量，并将值分配给所选按钮的任何值。我将如何在 jQuery 中做到这一点？

回答by Terry

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

In plain English that selection reads as:

用简单的英语，选择读作：

• give me the value of
• buttonelements
• filter by the nameattribute that has a value of rating(the group)
• and the CSS class active(indicating it was selected)

• 给我价值
• button元素
• 按name具有rating值的属性（组）过滤
• 和 CSS 类active（表明它被选中）

Edit based on OP's new question in comments:

根据 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
});?

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

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

回答by lilj

Here is my solution: http://jsfiddle.net/tFYV9/1/

这是我的解决方案：http: //jsfiddle.net/tFYV9/1/

EDIT(Code from jsFiddle)

编辑（来自 jsFiddle 的代码）

HTML

HTML

<input type="text" id="hidden_ipt" value="0" />
<div class="btn-group" data-toggle="buttons-radio" data-target="hidden_ipt"> 
  <button type="button" class="btn" data-toggle="button" value="female">
    female  
  </button>
  <button type="button" class="btn" data-toggle="button" value="male">
    male
  </button>
</div>?

JavaScript

JavaScript

// Bootstrap Hack
var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle;
$.fn.button.prototype.constructor.Constructor.prototype.toggle = function(){
  _old_toggle.apply(this);
  var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
  var target = $parent ? $parent.data('target') : undefined;
  var value = this.$element.attr('value');
  if(target && value){
    $('#'+target).val(value);
  }
}

回答by dubrod

Try this. It worked for me. I have a huge form worked multiple times.

尝试这个。它对我有用。我有一个巨大的表格工作过多次。

<div class="btn-group" data-toggle="buttons-checkbox">
<button onclick="javascript:document.getElementById('INPUT_ID').value='1'" type="button" class="btn">CHECK ME</button>
</div>
<input type="hidden" id="INPUT_ID" name="INPUT_ID" value="" />

回答by rybo111

Good news!

好消息！

Bootstrap 3 now uses input type="radio"button groups!

Bootstrap 3 现在使用input type="radio"按钮组！

If you don't want to upgrade, however, see my answer below:

但是，如果您不想升级，请参阅下面的答案：

---

---

I'm using the following jQuery:

我正在使用以下 jQuery：

$('[data-toggle="buttons-radio"]').children(".btn").click(function(){
    var value = $(this).val();
    $(this).parent().next().val(value);
    $(this).parent().next().valid(); // Remove this if you're not using jQuery Validation
});

For this to work, all you need to do is ensure each buttonhas a valueand have an input(I prefer to use type="hidden"but type="text"is good for testing) after the btn-groupdiv.

对于这个工作，你需要做的是确保每个button有value和有input（我更喜欢使用type="hidden"，但type="text"对于测试好）之后btn-groupdiv。

I noticed that if you submit the form and then hit the back button, all form data will still be present, including the hidden inputs, but the buttons will not be active. To fix that, add this extra jQuery:

我注意到如果您提交表单然后点击后退按钮，所有表单数据仍将存在，包括隐藏的输入，但按钮不会处于活动状态。要解决这个问题，请添加这个额外的 jQuery：

$('[data-toggle="buttons-radio"]').each(function(){
    var that = $(this);
    var value = that.next().val();
    if(value != "") {
        that.children("button[value="+value+"]").addClass("active");
    }
});

回答by SaV

You can use my plugin bootstrap-form-buttonsetto skin radios or checkboxes to bootstrap button groups. It is compatible to Bootstrap 2 and Bootstrap 3.

您可以使用我的插件bootstrap-form-b​​uttonset来皮肤收音机或复选框来引导按钮组。它与 Bootstrap 2 和 Bootstrap 3 兼容。

Just write plain old radio inputs, wrap them together and call $('.my-wrapper').bsFormButtonset('attach'). Thats it.

只需编写普通的旧收音机输入，将它们包装在一起并调用$('.my-wrapper').bsFormButtonset('attach'). 就是这样。