jQuery - get active button from buttons group (input type = "radio")

Question

I'm using bootstrap buttons, which look like regular buttons but they act like radio.

<div class="btn-group-horizontal" data-toggle="buttons" id ="Group">
  <label class="btn btn-sm btn-info btnSelect active">
    <input type="radio" name="options" id="Option 1" autocomplete="off" checked> Option 1
  </label>
  <label class="btn btn-sm btn-info btnSelect">
    <input type="radio" name="options" id="Option 2" autocomplete="off"> Option 2
  </label>
</div>

How can I get the ID / text of the active button?

Thanks!

possible duplicate of [How can I get which radio is selected via jQuery?](http://stackoverflow.com/questions/596351/how-can-i-get-which-radio-is-selected-via-jquery) — Igor Kustov, Dec 07 '14 at 09:44

score 10 · Accepted Answer · answered Dec 08 '14 at 16:40

The solution was the following:

I had to change the HTML by addiong ID to the lable

<div class="btn-group-horizontal" data-toggle="buttons" id ="Group">
  <label class="btn btn-sm btn-info btnSelect active" **id="Option 1"**>
    <input type="radio" name="options" id="Option 1" autocomplete="off" checked> Option 1
  </label>
  <label class="btn btn-sm btn-info btnSelect" **id="Option 2"**>
    <input type="radio" name="options" id="Option 2" autocomplete="off"> Option 2
  </label>
</div>

and by using following jQuery:

var answer= '';
            $('#Group .active').each(function(){
                answer= $(this).attr('id'); 
            });

score 6 · Answer 2 · answered Dec 07 '14 at 09:46

6

You can just use a simple CSS selector

$(document).ready(function () {
    alert($('.active input').prop('id'));
});

Demo: http://jsfiddle.net/robschmuecker/L7maoufy/

answered Dec 07 '14 at 09:46

Rob Schmuecker

8,934
2
18
34

this should be flag as the response – Emmanuel Gleizer Jul 03 '18 at 07:08

score 1 · Answer 3 · answered Dec 07 '14 at 09:44

1

Can try using each() & is(). Example:

var activeId = '';
$('input[type=radio]').each(function(){
    if($(this).is(':checked')){
        activeId = $(this).attr('id'); 
        //alert(activeId);
        return false;
    }
});

answered Dec 07 '14 at 09:44

MH2K9

11,951
7
32
49

How can I limit this to specific group of buttons only ( in this case id = "Group"? – Vika Dec 07 '14 at 09:50
you can use `$('input[name="options"]').each(...)` ; – Riad Dec 07 '14 at 09:55
@Vika then can use `$('#Group input[type=radio]').each()` instead – MH2K9 Dec 07 '14 at 10:00

jQuery - get active button from buttons group (input type = "radio")

3 Answers3