Question

我在bootstrap按钮组上遇到点击事件的问题。我试图检索活动按钮的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);
       });

如何确保我在活动课程的按钮上收到所有ID？

我使用的按钮是bootstrap checkbox style buttons。点击它们后，它们就会被选中。当你点击它们时，它们就会被取消选择。

Answer 1

您可以在检索所有活动按钮之前在点击功能中添加该类。

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

使用按钮方法在检索

之前设置复选框

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

Here是一个有效的例子，但是我不喜欢两次调用按钮（'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');
  }

jquery按钮单击事件

3 个答案: