jquery button click event

Question

У меня проблема с событием click на группе кнопок начальной загрузки. Я пытаюсь получить идентификаторы активных кнопок. Включая тот, на который я сейчас нажимаю (если он не выбран). Проблема в том, что текущая кнопка, которую я нажимаю, не добавляется как выбранная кнопка, когда я ее выбрал. Как будто класс active еще не был применен.

Вот моя группа кнопок:

<div class="btn-group" id = "rbtns" data-toggle="buttons-checkbox" > 
     <button class="btn rbtn" id = "0">0</button> 
     <button class="btn rbtn" id = "1">1</button> 
     <button class="btn rbtn" id = "2">2</button> 
     <button class="btn rbtn" id = "3">3</button> 
     <button class="btn rbtn" id = "4">4</button> 
    </div> 

И мои действия:

$(document).ready(function() { 

     $(".rbtn").click(function() { 

     var data = []; 

     $('#rbtns .btn.active').each(function() { 
       data.push($(this).attr('id')); 

     }); 

     alert ("Data length: " + data.length); 
     }); 

Как я могу убедиться, что я получаю все идентификаторы кнопок с классом активной?

Кнопки, которыми я пользуюсь, - bootstrap checkbox style buttons. Как только вы нажмете на них, они будут выбраны. И когда вы нажимаете на них, они не выбираются.

Answer 1

Вы можете добавить класс в функции мыши перед вашим получить все активные кнопки.

$(this).addClass('active'); 

Используйте метод кнопки, чтобы установить флажок перед извлечением

$(this).button('toggle'); 

Here является рабочим примером, но я не очень нравится, кнопка вызова («пуговица») дважды.

Answer 2

Fiddle: http://jsfiddle.net/xdyRt/

$(".rbtn").click(function() { 
    $(this).toggleClass("active");  
    var data = []; 

    $(".btn").each(function() { 
     $(this).hasClass("active") ? data.push($(this).attr("id")) : null; 
    }); 

    for (var i = 0; i < data.length; i++) { 
     alert(data[i]); 
    } 
}); 

Answer 3

Попробуйте явно установив кнопку Clicked в качестве активного

$(".rbtn").click(function() { 
    if ($(this).hasClass('active') == false){ 
    $(this).addClass('active'); 
    }