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

Question

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

  

        
                      

              相关标签:
       
      

Answer 1

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

In plain English that selection reads as:

• 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)

Edit based on OP's new question in comments:

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 input vs. the button and why you shouldn't use the button in a form: http://jsfiddle.net/TxgVe/1/

Answer 2

Good news!

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

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

---

I'm using the following 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 button has a value and have an input (I prefer to use type="hidden" but type="text" is good for testing) after the btn-group div.

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:

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

Answer 3

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

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

Answer 4

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="" />

Answer 5

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

EDIT (Code from jsFiddle)

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

// 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);
  }
}