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.