根據值設置複選框的活動狀態

Question

我正在創建過濾系統，最近我開始使用單選框而不是按鈕。我現在遇到的問題是，當用戶點擊一個按鈕時，我刷新了所有的按鈕狀態，但是他們實際點擊的按鈕沒有激活。如果我點擊另一個按鈕，它會變得活躍。

整個事情，究竟它是如何在我的實際網站上行爲不端，是here。

JS和jQuery設置活躍按鈕和過濾器：

var filters = { 
    'period_months': [], 
    'period_years': [{filter_value: 2013, filter_display: "2013"}], 
    'period_quarters': [{filter_value: 1, filter_display: "Q1"}] 
}; 
draw(); 
$(".filter_toggle").click(function(e) { 
    var key = $(this).children('input').data('filterKey'); 
    var value = $(this).children('input').data('filterValue'); 
    var display = $(this).children('input').data('filterDisplay'); 
    if (key === "period_months") { 
     filters['period_years'] = []; 
     filters['period_quarters'] = []; 
    } else if ((key === "period_years") || (key === "period_quarters")) { 
     filters['period_months'] = []; 
    } 
    toggle(key,value,display); 
}); 
function toggle(filter_key,filter_value,filter_display) { 
    var filter_exists = false; 
    for (var i in filters[filter_key]) { 
     if (filters[filter_key][i]['filter_value'] == filter_value) { 
      filter_exists = true; 
      filters[filter_key].splice(i,1); 
      break; 
     } 
    } 
    var filter_in = { filter_value: filter_value, filter_display: filter_display }; 
    if (!filter_exists) { 
     filters[filter_key] = []; 
     filters[filter_key].push(filter_in); 
    } 
    draw(); 
} 
function draw() { 
    $('input').prop("checked",false).parent(".btn").removeClass("active").attr("aria-pressed",false); 

    for (i in filters) {  
     for (k in filters[i]) { 
      $("*[data-filter-key="+i+"][data-filter-value="+filters[i][k]['filter_value']+"]") 
      .prop("checked",true) 
      .parent(".btn") 
      .addClass("active") 
      .attr("aria-pressed",true); 
     } 
    } 
} 

在period_ *過濾器的情況下，一年有四分之一可以一起去。如果您設定月份或範圍，則其他時間段均未設置。

所有上述工作正常，當我設置頁面加載狀態，但不是當我點擊一個新的過濾器。其餘代碼處於小提琴中，包括點擊事件等。

Answer 1

如果我理解正確的話，這可能是解決

UPDATE：

function clearMonths() { 
    $('#period_months .filter_toggle').removeClass('active'); 
    $('#period_months input').prop("checked", false) 
} 

function clearYears() { 
    $('#period_years .filter_toggle').removeClass('active'); 
    $('#period_years input').prop("checked", false) 
} 

function clearQuarters() { 
    $('#period_quarters .filter_toggle').removeClass('active'); 
    $('#period_quarters input').prop("checked", false) 
} 

$(".btn-group").click(function (e) { 

    if ($(this).attr('id') == 'period_months') { 
     clearYears() 
     clearQuarters() 
     clearMonths() 
    } 

    if ($(this).attr('id') == 'period_years') { 
     clearMonths(); 
     clearYears(); 
    } 

    if ($(this).attr('id') == 'period_quarters') { 
     clearMonths(); 
     clearQuarters() 
    } 

    $(this).find('label:active input').prop("checked", true); 


}); 

http://jsfiddle.net/25v4m6ue/5/