Question

我有一个像这样的复选框按钮组：

<div class="btn-group" id="id_group" data-toggle="buttons-checkbox">
  <button class="btn myclass" type="button" data-value="0">Value 0</button>
  <button class="btn myclass" type="button" data-value="1">Value 1</button>
</div>

JS事件处理程序：

$(".myclass").click(function(event) {
  console.log($(".myclass.active").length);
  console.log($(this).hasClass("active"));
});

我想为所有选中的按钮获取data-value，但在单击事件中，active类尚未设置。这意味着，当我第一次单击按钮时，输出为：

>>> 0
>>> false

下次单击相同按钮（即取消选中）时，输出为：

>>> 1
>>> true

这意味着事件后正在设置active类。

如何在点击事件期间获取按钮的实际状态？

Answer 1

我一直遇到点击事件和活动课程时间的问题！

进一步使用davidkonrad的答案并使用this post我想出了以下内容，以避免修改bootstrap源但比完全覆盖更轻量级。

var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle;

$.fn.button.prototype.constructor.Constructor.prototype.toggle = function () {
    _old_toggle.apply(this);

    if (this.$element.hasClass('active')) {
        this.$element.trigger('active')
    }
}

Answer 2

如果每次将类active添加到按钮时您都非常想要一个事件，那么您可以修改bootstrap.js。 {/ 1}}在由点击第1362-1370行触发的小函数active中设置/取消设置：

Button.prototype.toggle

将此更改为

Button.prototype.toggle = function () {
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.active')
      .removeClass('active')

    this.$element.toggleClass('active')
  }

现在您有一个可以绑定到Button.prototype.toggle = function () { var $parent = this.$element.closest('[data-toggle="buttons-radio"]') $parent && $parent .find('.active') .removeClass('active') this.$element.toggleClass('active') if (this.$element.hasClass('active')) { this.$element.trigger('active') } }

的事件

.myclass

或者，如果您认为上面的内容太脏了 - 您可以按照此处描述的框架How to Extend Twitter Bootstrap Plugin

扩展/修改Button.prototype（添加方法，选项等）

Answer 3

您已正确推断。 click事件尚未更新活动类，因此当您搜索它们时，它不会返回。没有为类更改触发的事件。

但是，您可以做的是添加一个setTimout个，100毫秒，足够的时间来触发点击事件。请注意，您可能需要调整延迟以允许事件传播。

Answer 4

我使用jQuery的data管理来存储active状态，在按钮点击时切换它。不是很好，但它是一些东西。

点击事件后，Twitter Bootstrap复选框按钮值发生了变化

4 个答案: