Get the value of a twitter bootstrap radio button. JQuery

Question

I'm using the Radio-button from twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#buttons.

In my html in looks like this:

  <div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
  </div>
  <input type="submit" onclick="get_the_value_and_do_something_with_it"

I would like to know how to get the value of the button the user checked thanks to Jquery or Javascript.

I saw several question on this topic, but I think it is different with this kind of button, because it looks like they do not accept a "checked" attribute.

Any help would be very welcome

PS: if someone knows how to check by default one of the button, it would also help me a lot. Thank you.

Answer 1

as the tag says it's a button, for that, you should do what it suggests, and work with those buttons... here's a simple example:

<input type="hidden" id="alignment" value="" />
<div class="btn-group alignment" data-toggle="buttons-checkbox">
    <button type="button" class="btn">Left</button>
    <button type="button" class="btn">Middle</button>
    <button type="button" class="btn">Right</button>
</div>

now the jQuery:

$(".alignment .btn").click(function() {
    // whenever a button is clicked, set the hidden helper
    $("#alignment").val($(this).text());
}); 

upon submit, you will find the value in the alignment hidden field.

Here's a basic example: http://jsbin.com/oveniw/1/

---

a good thing to take attention is that upon click, the element changes and bootstrap appends an active class name to the clicked button.

You can always use this to change the hidden field, but I would continue to do my example if I wanted to submit the form it self.

Answer 2

You can "check" a button by setting its class to ´active´:

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn active">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

To get a value, you should have a "value" data, such as:

<div class="btn-group" data-toggle="buttons-checkbox" id="my_radiogroup">
  <button type="button" class="btn" data-value="0">Left</button>
  <button type="button" class="btn active" data-value="1">Middle</button>
  <button type="button" class="btn" data-value="2">Right</button>
</div>

This way, you may get the value via:

$("#my_radiogroup .active").data("value");
>>> 1
(but may, of course, be undefined if no button is checked)

But keep in mind that the value won't be posted in your form, unless you have a <input type=hidden> to actually store the selected data.