Jquery 绑定到引导单选按钮状态更改

在同样使用jQuery的页面中，我有以下引导HTML：

<div class="btn-group" data-toggle="buttons-radio">
    <button id="copyButton" class="btn btn-small btn-primary">Copy</button>
    <button id="editButton" class="btn btn-small btn-primary">Modify</button>
    <button class="btn btn-small btn-primary active">Do nothing</button>
</div>

---

但在我看来，刚刚单击的按钮似乎没有包含在计数中，因为在调用

onClick

之后才应用

active

类。我还尝试绑定到

mouseup

事件，但似乎也太早了。

您可以尝试在单击时检查它是否已处于活动状态。因此，它并不能真正解决有关启动活动的通知的问题，但它是您的示例的一种解决方法

$(document).ready(function () {
    $('button').on('click', function () {
        if ($(this).is("#editButton")) {
            if (!$(this).is("#editButton.active")) {
                updateCounts(1, 0);
            } else {
                updateCounts(-1, 0);
            }
        } else if ($(this).is("#copyButton")) {
            if (!$(this).is("#copyButton.active")) {
                updateCounts(0, 1);
            } else {
                updateCounts(0, -1);
            }
        }
    });


});

function updateCounts(changeEdit, changeCopy) {
    var modifyValueCount = parseFloat($("#variablesToModifyCount").text()) + changeEdit;
    var copyValueCount = parseFloat($("#variablesToCopyCount").text()) + changeCopy;
    $("#variablesToModifyCount").text(modifyValueCount < 0 ? 0 : modifyValueCount);
    $("#variablesToCopyCount").text(copyValueCount < 0 ? 0 : copyValueCount);
}

$（文档）.ready（函数（）{
$（'button'）。在（'click'，函数（）{
if（$（this）.is（“#编辑按钮”））{
if（！$（this）.is（#editButton.active）））{
更新计数（1,0）；
}否则{
更新计数（-1,0）；
}
}else if（$（this）.is（#copyButton）））{
如果（！$（this）.is（#copyButton.active）））{
更新计数（0,1）；
}否则{
更新计数（0，-1）；
}
}
});
});
函数updateCounts（changeEdit、changeCopy）{
var modifyValueCount=parseFloat（$（“#variablestodifycount”）.text（））+changeEdit；
var copyValueCount=parseFloat（$（“#variablesToCopyCount”）.text（）+changeCopy；
$（“#variablesToModifyCount”）.text（modifyValueCount<0？0:modifyValueCount）；
$（“#variablesToCopyCount”）.text（copyValueCount<0？0:copyValueCount）；
}

编辑 这是基于bootstrap2.3.2和上述切换行为非复选框， （非常粗略的实现只是提供了一个示例，检查单击时是否不存在活动类，以便采取相应的行动）

$（文档）.ready（函数（）{
$（“#variablesToModifyCount”）.text（$（$（$（按钮[id=editButton].active”）.length）；
$（“#variablesToCopyCount”）.text（$（$（$（按钮[id=copyButton].active”）.length）；
$（'button'）。在（'click'，函数（）{
updateCounts（$（this）.is（“#editButton”）&&&！$（this）.is（“#editButton.active”），
$（this）.is（“#copyButton”）&&&！$（this）.is（“#copyButton.active”），
！$（此）.is（'editButton'）&&！$（此）.is（'copyButton'）；
});
});
函数updateCounts（递增编辑、递增复制、递减计数）{
var modifyValueCount=$（“按钮[id=editButton].active”）。长度；
var copyValueCount=$（“按钮[id=copyButton].active”）.length；
如果（递增编辑）{
modifyValueCount++；
copyValueCount--；
}
如果（递增复制）{
copyValueCount++；
modifyValueCount--；
}
if（递减高度）{
copyValueCount--；
modifyValueCount--；
}
$（“#variablesToModifyCount”）.text（modifyValueCount<0？0:modifyValueCount）；
$（“#variablesToCopyCount”）.text（copyValueCount<0？0:copyValueCount）；
}

---

如果用户单击已激活的按钮，会发生什么情况？那个按钮的计数不会下降吗？是的，它会下降。这就是你的目标吗？哦，你是说一开始就不算。事实上，你可以先数一数，我可以帮你更新。只是尝试详细说明检查类活动的相反状态的概念，而不是查找通知。如果我点击一个单选按钮两次，第一次它进入，第二次它什么也不做，其他人在过去似乎也遇到过类似的问题。但计数会先升后降。我需要的计数，以反映在…当你第一次点击一个按钮，它进入，所以它被添加的按钮数量。如果你再按一次，它就会消失，所以它会被减去。这不就是你的行为吗？我还更新了它以包括初始状态。奇怪的是，您在小提琴中的代码显示了

data toggle=“buttons checkbox”

行为，而我想要的是

data toggle=“buttons radio”

行为。我必须承认我不明白为什么，你的代码和我的一样。我只是想说清楚，我不希望用户能够进入一个组中没有按钮的情况。

$(document).ready(function () {
    $('button').on('click', function () {
        if ($(this).is("#editButton")) {
            if (!$(this).is("#editButton.active")) {
                updateCounts(1, 0);
            } else {
                updateCounts(-1, 0);
            }
        } else if ($(this).is("#copyButton")) {
            if (!$(this).is("#copyButton.active")) {
                updateCounts(0, 1);
            } else {
                updateCounts(0, -1);
            }
        }
    });


});

function updateCounts(changeEdit, changeCopy) {
    var modifyValueCount = parseFloat($("#variablesToModifyCount").text()) + changeEdit;
    var copyValueCount = parseFloat($("#variablesToCopyCount").text()) + changeCopy;
    $("#variablesToModifyCount").text(modifyValueCount < 0 ? 0 : modifyValueCount);
    $("#variablesToCopyCount").text(copyValueCount < 0 ? 0 : copyValueCount);
}

    $(document).ready(function () {
    $("#variablesToModifyCount").text($("button[id=editButton].active").length);
    $("#variablesToCopyCount").text($("button[id=copyButton].active").length);

    $('button').on('click', function () {
        updateCounts($(this).is("#editButton") && !$(this).is("#editButton.active"),
        $(this).is("#copyButton") && !$(this).is("#copyButton.active"),
                     !$(this).is('#editButton')&&!$(this).is('#copyButton'));
    });


});

function updateCounts(incrementEdit, incrementCopy, decrementAll) {
    var modifyValueCount = $("button[id=editButton].active").length;
    var copyValueCount = $("button[id=copyButton].active").length;
    if(incrementEdit){
        modifyValueCount++;
        copyValueCount--;
    }
    if(incrementCopy){
        copyValueCount++;
        modifyValueCount--;
    }
    if(decrementAll){
        copyValueCount--;
        modifyValueCount--;
    }

    $("#variablesToModifyCount").text(modifyValueCount < 0 ? 0 : modifyValueCount);
    $("#variablesToCopyCount").text(copyValueCount < 0 ? 0 : copyValueCount);
}