Binding загрузчика кнопка радио изменения состояния

Question

У меня есть следующий Bootstrap HTML в странице, которая также использует JQuery:

<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> 

Эти три кнопок появляются на каждой строке таблицы (для каждой строки пользователь должен выбрать действие).

Я хотел бы отобразить и обновить счетчик числа строк, где активна кнопка Copy, а также количество строк, в которых активна кнопка Modify.

Я попытался добавить следующую функцию, которая вызывается с помощью специальной функции кнопочного типа, связанной с click события кнопок:

function updateCounts() { 
    var modifyValueCount = $("button[id=editButton].active").length; 
    var copyValueCount = $("button[id=copyButton].active").length; 
    $("#variablesToModifyCount").text(modifyValueCount); 
    $("#variablesToCopyCount").text(copyValueCount); 
} 

Но мне кажется, что кнопка, которая только что была нажата не включается в счет, поскольку класс active не применяется до окончания вызова onClick. Я также попытался привязать к событию mouseup, но это также кажется слишком быстрым.

Answer 1

Вы можете проверить, активирован ли он при нажатии. Так что это не решает проблему с момента уведомления о активу начальной загрузки, но обходной путь для примера,

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

http://jsfiddle.net/HWfVN/

EDIT Это основано на bootstrap2.3.2 а toggle behavior, а не checkbox, как указано выше, (очень грубая реализация просто предоставляет пример проверка наличия активного класса при щелчке, чтобы действовать соответственно)

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

http://jsfiddle.net/HWfVN/3/