javascript - jquery按钮点击事件

Question

我对引导按钮组上的单击事件有疑问。我正在尝试检索处于活动状态的按钮的 ID。包括我当前单击的那个（如果未选中）。问题是当我选择它时，我单击的当前按钮不会被添加为选定按钮。好像还没有应用活动的类。

这是我的按钮组：

  <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);
       });

我怎样才能确保我收到所有 ids 与类活动的按钮？

我使用的按钮是引导复选框样式按钮。一旦你点击它们，它们就会被选中。当您单击它们时，它们会被取消选中。

Answer 1

在检索所有活动按钮之前，您可以在 click 函数中添加该类。

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

检索前使用按钮方法设置复选框

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

这是一个工作示例，但是我不太喜欢两次调用按钮（'toggle'）。

Answer 2

小提琴：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

尝试将单击的按钮显式设置为活动状态

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