2013-04-09 347 views
1

我在引导按钮组上有一个单击事件。我正在尝试检索活动按钮的ID。包括我目前点击的那个(如果它未被选中)。问题在于,当我选择它时,我点击的当前按钮不会添加为选定的按钮。就好像活动课程尚未应用一样。jquery按钮单击事件

这里是我的按钮组:

<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。一旦你点击他们,他们被选中。当你点击它们时,它们会被取消选中。

回答

2

之前还是可以在你点击功能添加类的检索的所有活动的按钮。

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

使用按钮方法检索

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

Here是一个工作示例之前设置的复选框,但我真的不喜欢呼叫按钮(“切换”)的两倍。

0

小提琴: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]); 
    } 
}); 
+0

这不守,一旦我点击它选择的按钮。它不再用作切换按钮。 – Ayrad 2013-04-09 19:41:47

+0

现在检查它,增加了一个小提琴 – tymeJV 2013-04-09 19:55:36

+0

这似乎并没有做到这一点。也许是因为我在复选框会话中的描述中添加了一个使用复选框样式按钮。也许引导js在jquery代码运行之后切换按钮,所以它会切换回 – Ayrad 2013-04-09 20:10:44

0

尝试明确设置点击的按钮为活动

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

设置显然似乎删除了按钮的切换行为。它不会坚持当你点击它。 – Ayrad 2013-04-09 19:50:22

+0

@Ayrad看看这是你想要的http://jsfiddle.net/ws78M/ – 2013-04-09 19:55:41