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:

Solution 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.

Solution 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.

Solution 3:

There is no reason to make this complicated.

Say you have a button group, for selecting whether something is active or inactive...like so...

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="productStatus btn btn-success" value="1">Yes</button>
    <button type="button" class="productStatus btn btn-danger" value="0">No</button>
</div>

When you run a function or anything to gather your selected button, you would run this command...which would get you the value of your selected radio button. When you click on a button, or more to the point, when it's "checked", it's given the class of "active" like in previous answers. That's all you really need to look for. With this little snippet below.

var active = $('.productStatus[class*="active"]').val();
alert(active);

Basically it's using a wildcard selector looking for this "productStatus" button class, and then returning the value of the button that has the "active" class.

Solution 4:

I use this hook when a number of Bootstrap radio buttons more than one

$('div[data-toggle="buttons-radio"] .btn').click(function(){
    $('input[name="' + $(this).parent().attr('id') + '"]').val($(this).val());
});

And in HTML:

<div class="btn-group" id="rental" data-toggle="buttons-radio">
    <button type="button" class="btn" value="0">Sale</button>
    <button type="button" class="btn" value="1">Rent</button>
</div>

<input type="hidden" name="rental" value="0">

Solution 5:

You can get the selected as follows:

$('.btn-group button.btn.active')

To, set a button active

$(selector).addClass('active')

For example, if you want set the first button active:

$('.btn-group button.btn:eq(0)').addClass('active')

JavaScript Charts